Difference between revisions of "Pengenalan Flask: Membuat Aplikasi Web Sederhana"

From OnnoWiki
Jump to navigation Jump to search
 
Line 1: Line 1:
−
# Modul 1.1: Pengenalan Flask: Membuat Aplikasi Web Sederhana
+
==Tujuan Pembelajaran==
−
 
 
−
## Tujuan Pembelajaran
 
  
 
Setelah menyelesaikan modul ini, Anda diharapkan mampu:
 
Setelah menyelesaikan modul ini, Anda diharapkan mampu:
  
−
- Memahami konsep dasar Flask dan cara membuat aplikasi web sederhana.
+
* Memahami konsep dasar Flask dan cara membuat aplikasi web sederhana.
−
- Membuat halaman "Hello, World!" menggunakan Flask.
+
* Membuat halaman "Hello, World!" menggunakan Flask.
−
- Menjalankan aplikasi Flask pada Ubuntu 24.04 tanpa menggunakan alat dari Microsoft.
+
* Menjalankan aplikasi Flask pada Ubuntu 24.04 tanpa menggunakan alat dari Microsoft.
  
−
## Pengenalan Flask
+
==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.
 
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.
  
−
## Persiapan Lingkungan Pengembangan
+
==Persiapan Lingkungan Pengembangan==
  
 
Sebelum memulai, pastikan Anda memiliki:
 
Sebelum memulai, pastikan Anda memiliki:
  
−
- **Ubuntu 24.04** terinstal pada sistem Anda.
+
* '''Ubuntu 24.04''' terinstal pada sistem Anda.
−
- **Python 3** terinstal. Untuk memeriksa versi Python, jalankan perintah:
+
* '''Python 3''' terinstal. Untuk memeriksa versi Python, jalankan perintah:
−
 
+
    
−
   ```bash
+
python3 --version
−
  python3 --version
 
−
  ```
 
−
 
 
−
  Jika Python belum terinstal, Anda dapat menginstalnya dengan:
 
  
−
  ```bash
+
Jika Python belum terinstal, Anda dapat menginstalnya dengan:
−
  sudo apt update
+
−
  sudo apt install python3
+
sudo apt update
−
  ```
+
sudo apt install python3
  
−
- **pip** (Python package manager) terinstal. Periksa dengan:
+
* '''pip''' (Python package manager) terinstal. Periksa dengan:
  
−
  ```bash
+
pip3 --version
−
  pip3 --version
+
−
  ```
+
Jika pip belum terinstal, instal dengan:
−
 
+
−
  Jika pip belum terinstal, instal dengan:
+
sudo apt install python3-pip
−
 
+
    
−
  ```bash
+
==Membuat Virtual Environment==
−
  sudo apt install python3-pip
 
−
   ```
 
−
 
 
−
## Membuat Virtual Environment
 
  
 
Sebaiknya kita menggunakan virtual environment untuk mengisolasi dependensi proyek. Buat dan aktifkan virtual environment dengan perintah berikut:
 
Sebaiknya kita menggunakan virtual environment untuk mengisolasi dependensi proyek. Buat dan aktifkan virtual environment dengan perintah berikut:
  
−
```bash
+
# Instal modul venv jika belum ada
−
# Instal modul venv jika belum ada
+
sudo apt install python3-venv
−
sudo apt install python3-venv
+
−
 
+
# Buat virtual environment bernama 'venv'
−
# Buat virtual environment bernama 'venv'
+
python3 -m venv venv
−
python3 -m venv venv
+
−
 
+
# Aktifkan virtual environment
−
# Aktifkan virtual environment
+
source venv/bin/activate
−
source venv/bin/activate
 
−
```
 
  
 
Setelah aktivasi, prompt terminal Anda akan menunjukkan bahwa virtual environment sedang aktif.
 
Setelah aktivasi, prompt terminal Anda akan menunjukkan bahwa virtual environment sedang aktif.
  
−
## Instalasi Flask
+
==Instalasi Flask==
  
 
Dengan virtual environment aktif, instal Flask menggunakan pip:
 
Dengan virtual environment aktif, instal Flask menggunakan pip:
  
−
```bash
+
pip install flask
−
pip install flask
 
−
```
 
−
 
 
−
## Membuat Aplikasi "Hello, World!"
 
−
 
 
−
1. **Membuat Struktur Proyek**
 
  
−
  Buat direktori untuk proyek Anda dan navigasikan ke dalamnya:
+
==Membuat Aplikasi "Hello, World!"==
  
−
  ```bash
+
1. '''Membuat Struktur Proyek'''
−
  mkdir hello_flask
 
−
  cd hello_flask
 
−
  ```
 
  
−
2. **Membuat Aplikasi Flask**
+
Buat direktori untuk proyek Anda dan navigasikan ke dalamnya:
 +
 
 +
mkdir hello_flask
 +
cd hello_flask
 +
 
 +
2. '''Membuat Aplikasi Flask'''
  
−
  Buat file bernama `app.py` dan tambahkan kode berikut:
+
Buat file bernama `app.py` dan tambahkan kode berikut:
  
−
   ```python
+
from flask import Flask
−
  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.
  
−
  app = Flask(__name__)
+
3. '''Menjalankan Aplikasi'''
  
−
   @app.route('/')
+
Pastikan virtual environment aktif, lalu jalankan aplikasi dengan:
−
   def hello():
+
    
−
      return 'Hello, World!'
+
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'''
  
−
  if __name__ == '__main__':
+
Buka browser web dan navigasikan ke `http://127.0.0.1:5000/`. Anda akan melihat pesan "Hello, World!" ditampilkan.
−
      app.run(debug=True)
 
−
  ```
 
  
−
  Penjelasan kode:
+
==Penanganan Rute Tambahan==
−
 
 
−
  - `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.
 
−
 
 
−
## Penanganan Rute Tambahan
 
  
 
Flask memungkinkan penanganan berbagai rute. Misalnya, tambahkan rute baru untuk menyapa pengguna berdasarkan nama:
 
Flask memungkinkan penanganan berbagai rute. Misalnya, tambahkan rute baru untuk menyapa pengguna berdasarkan nama:
  
−
```python
+
@app.route('/user/<name>')
−
@app.route('/user/<name>')
+
def greet_user(name):
−
def greet_user(name):
+
    return f'Hello, {name.capitalize()}!'
−
    return f'Hello, {name.capitalize()}!'
 
−
```
 
  
 
Dengan penambahan ini, mengakses `http://127.0.0.1:5000/user/andi` akan menampilkan "Hello, Andi!".
 
Dengan penambahan ini, mengakses `http://127.0.0.1:5000/user/andi` akan menampilkan "Hello, Andi!".
  
−
## Menjalankan Aplikasi pada Port Berbeda
+
==Menjalankan Aplikasi pada Port Berbeda==
  
 
Secara default, Flask berjalan pada port 5000. Untuk menjalankan pada port lain, misalnya 8080, ubah pemanggilan `app.run()` menjadi:
 
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)
−
app.run(debug=True, port=8080)
 
−
```
 
  
 
Atau jalankan aplikasi dengan perintah:
 
Atau jalankan aplikasi dengan perintah:
  
−
```bash
+
python app.py --port=8080
−
python app.py --port=8080
 
−
```
 
  
−
## Menggunakan Template HTML
+
==Menggunakan Template HTML==
  
 
Untuk memisahkan logika Python dan tampilan, Flask menggunakan template. Buat folder `templates` dan tambahkan file `index.html`:
 
Untuk memisahkan logika Python dan tampilan, Flask menggunakan template. Buat folder `templates` dan tambahkan file `index.html`:
  
−
**Struktur Direktori:**
+
'''Struktur Direktori:'''
  
−
```
+
hello_flask/
−
hello_flask/
+
├── app.py
−
├── app.py
+
└── templates/
−
└── templates/
+
    └── index.html
−
    └── index.html
 
−
```
 
  
−
**Isi `index.html`:**
+
'''Isi `index.html`:'''
  
−
```html
+
<pre>
−
<!doctype html>
+
<!doctype html>
−
<html lang="id">
+
<html lang="id">
−
<head>
+
<head>
−
    <meta charset="utf-8">
+
    <meta charset="utf-8">
−
    <title>Halo Flask</title>
+
    <title>Halo Flask</title>
−
</head>
+
</head>
−
<body>
+
<body>
−
    <h1>{{ message }}</h1>
+
    <h1>{{ message }}</h1>
−
</body>
+
</body>
−
</html>
+
</html>
−
```
+
</pre>
  
 
Ubah `app.py` untuk merender template ini:
 
Ubah `app.py` untuk merender template ini:
  
−
```python
+
from flask import Flask, render_template
−
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)
  
−
app = Flask(__name__)
+
Sekarang, saat mengakses `http://127.0.0.1:5000/`, template HTML akan dirender dengan pesan yang diberikan.
  
−
@app.route('/')
+
==Latihan==
−
def hello():
 
−
    return render_template('index.html', message='Hello, World!')
 
  
−
if __name__ == '__main__':
+
* Tambahkan rute baru `/about` yang menampilkan informasi singkat tentang aplikasi.
−
    app.run(debug=True)
+
* Buat halaman HTML terpisah untuk rute `/about` menggunakan template.
−
```
+
* Eksplorasi dokumentasi Flask untuk memahami fitur-fitur lainnya.
 +
 
 +
Dengan menyelesaikan modul ini, Anda telah mempelajari dasar-dasar Flask dan cara membuat aplikasi web sederhana.
  
−
Sekarang, saat mengakses `http://127.0.0.1:5000/`, template HTML akan dirender dengan pesan yang diberikan.
 
  
−
## Referensi
+
==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).
 
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).
−
 
−
## 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.
 
  
  
 +
==Pranala Menarik==
  
−
  - **1.1. Pengenalan Flask: Membuat Aplikasi Web Sederhana**
+
* [[Web Programming]]
−
    - 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)
 

Latest revision as of 12:34, 7 April 2025

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.

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.

Persiapan Lingkungan Pengembangan

Sebelum memulai, pastikan Anda memiliki:

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

Jika Python belum terinstal, Anda dapat menginstalnya dengan: 

sudo apt update
sudo apt install python3
  • pip (Python package manager) terinstal. Periksa dengan:
pip3 --version

Jika pip belum terinstal, instal dengan: 

sudo apt install python3-pip

Membuat Virtual Environment

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

# Instal modul venv jika belum ada
sudo apt install python3-venv

# Buat virtual environment bernama 'venv'
python3 -m venv venv

# Aktifkan virtual environment
source venv/bin/activate

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

Instalasi Flask

Dengan virtual environment aktif, instal Flask menggunakan pip: 

pip install flask

Membuat Aplikasi "Hello, World!"

1. Membuat Struktur Proyek

Buat direktori untuk proyek Anda dan navigasikan ke dalamnya: 

mkdir hello_flask
cd hello_flask

2. Membuat Aplikasi Flask

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

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: 

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.

Penanganan Rute Tambahan

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

@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!".

Menjalankan Aplikasi pada Port Berbeda

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

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

Atau jalankan aplikasi dengan perintah: 

python app.py --port=8080

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`: 

 <!doctype html>
 <html lang="id">
 <head>
     <meta charset="utf-8">
     <title>Halo Flask</title>
 </head>
 <body>
     <h1>{{ message }}</h1>
 </body>
 </html>

Ubah `app.py` untuk merender template ini: 

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.

Latihan

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

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


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).


Pranala Menarik

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Pengenalan_Flask:_Membuat_Aplikasi_Web_Sederhana&oldid=72434"