Baik!
Mari kita bahas tentang pengujian dan penerapan static file di Flask secara
sederhana dan jelas.
📁 Apa Itu Static Files di Flask?
Static files adalah file yang tidak berubah, seperti:
Gambar (.jpg, .png)
CSS
JavaScript
Font
Flask secara otomatis menyajikan file statis dari folder static/.
✅ Struktur Folder Flask (Contoh)
swift
SalinEdit
/projek_flask/
│
├── [Link]
├── static/
│ ├── [Link]
│ ├── [Link]
│ └── [Link]
└── templates/
└── [Link]
🚀 Langkah-Langkah Penerapan Static File
1. Buat File Python Flask
python
SalinEdit
from flask import Flask, render_template
app = Flask(__name__)
@[Link]('/')
def home():
return render_template('[Link]')
if __name__ == '__main__':
[Link](debug=True)
2. Buat Template HTML: templates/[Link]
html
SalinEdit
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh Static File</title>
<!-- Link ke file CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='[Link]')
}}">
</head>
<body>
<h1>Selamat Datang</h1>
<img src="{{ url_for('static', filename='[Link]') }}" alt="Gambar
Contoh" width="200">
<p id="paragraf">Ini paragraf.</p>
<!-- Link ke file JavaScript -->
<script src="{{ url_for('static', filename='[Link]') }}"></script>
</body>
</html>
3. Contoh static/[Link]
css
SalinEdit
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
}
4. Contoh static/[Link]
javascript
SalinEdit
[Link]("paragraf").[Link] = "green";
🧪 Pengujian
1. Jalankan aplikasi Flask:
bash
SalinEdit
python [Link]
2. Buka browser ke:
arduino
SalinEdit
[Link]
3. Lihat apakah:
o CSS diterapkan (latar belakang abu-abu, teks biru)
o Gambar tampil
o JavaScript bekerja (paragraf berwarna hijau)
🛠 Tips Debugging
File wajib berada di dalam folder static/
Gunakan url_for('static', filename='nama_file.ext') agar aman di semua
sistem
Periksa konsol browser (F12 > Console / Network) untuk error file tidak ditemukan