Pada tutorial sebelumnya kita sudah belajar bagaimana cara membuat rute URL website python dengan flask. Kali ini saya akan membagikan seri lanjutannya dimana kita akan menyertakan atau memasukan file gambar dan CSS (Cascading Style Sheets) di flask.
Berbeda dengan web framework lain, Flask tidak menyediakan struktur direktori untuk menyimpan file-file yang dibutuhkan aplikasi seperti file gambar dan CSS, itu sebabnya kita bisa membuat struktur direktori sendiri di dalam aplikasi kita. Lau bagaimana cara membuatnya? Simak pada pembahasan berikut ini:
Daftar Isi
Langkah 1: Buat Folder Static
Buatlah folder static di dalam direktori project aplikasi kita, lalu di dalam folder tersebut buat folder css dan img untuk menyimpan setiap file CSS dan gambar untuk kebutuhan aplikasi.
Langkah 2 : Buat file app.py
Di dalam folder web_python buat file app.py yang nantinya sebagai objek aplikasi. Kalian bisa menggunakan teks editor seperti visual studio code atau atom.
from flask import Flask, render_template, url_for
application = Flask(__name__)
@application.route('/')
@application.route('/index')
def index():
kalimat='Menyertakan file gambar dan CSS di Flask- www.kelasprogrammer.com'
return render_template('index.html',kalimat=kalimat)
if __name__ == '__main__':
application.run(debug=True)Pada file app.py kita menginport modul flask dari kelas flask, render_template karena kita akan menggunakan template dan url_for untuk membuat URL yang akan kita panggil dari template.
Kita membuat nama objek application dari kelas Flask (Kalian bisa membuat dengan nama objek yang lain).
Sebagai contoh disini kita hanya membuat satu fungsi view saja yaitu index() yang dipetakan melalui URL ‘/’ dan ‘/index’ sebagai root direktori, jadi ketika pengguna memanggil URL http://localhost:5000 atau http://localhost:5000/index, maka fungsi index() yang akan ditampilkan, dengan menampilkan template dari index.html.
Fungsi render_template() akan melewatkan parameter kalimat yang nantinya akan di tampilkan pada template.
Langkah 3 : Buat Template
Buat terlebih dahulu folder templates, lalu kemudian buat file index.html di dalam folder tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Aplikasi Web Python</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css')}}">
</head>
<body>
<div id="container">
<img src="{{ url_for('static',filename='img/logo.png')}}" id="logo" width="300px"/>
<p>{{ kalimat }}</p>
</div>
</body>
</html>Pada bagian template coba perhatikan pada atribut href (css) dan src (img) terdapat sintak di dalam tanda {{ dan }} di sinilah kita akan memanggil file CSS dan gambar melalui fungsi url_for(). Di mana pada contoh ini melewatkan dua parameter, parameter yang pertama untuk nama folder ‘static‘ dan parameter yang kedua ada nama file yang akan kita panggil.
Kita juga memanggil kalimat yang kita buat pada fungsi index() lewat sintak {{ kalimat }}.
Langkah 4 : Buat File CSS
Buatlah file dengan nama style.css simpan di dalam folder static/css/
body{
font-family: sans-serif;
background: #ccfff2;
text-align: center;
}
#logo{
width: 100%;
margin:auto;
padding:auto;
padding-bottom: 20px;
}
#container{
width: 360px;
background: white;
margin:180px auto;
padding: 30px 20px;
border-radius: 6px;
}
Langkah 5 : Masukan Gambar
Masukan gambar ke dalam folder static/img
Review Direktori
Jika kalian mengikuti langkah-langkah di atas maka hasil yang telah kita buat pada project kali ini seperti pada screenshot di bawah ini:
Langkah 6 : Jalankan Aplikasi
Buka aplikasi lewat browser pada URL http://localhost/5000 atau sesuai dengan URL yang ada di CMD saat aplikasi di runinng.
Hasilnya seperti gambar di atas, kita sudah berhasil menyertakan atau memasukan file gambar dan CSS di dalam project aplikasi dengan menggunakan Flask.