Artificial Intelligence in Industry 4.0 for Manufacturing Industry: 3. Flask Templates and Forms.html

3. Flask Templates and Forms.html

Flask Templates and Forms

Pendahuluan

Halo stupenss, kita bertemu kembali ! Pada materi sebelumnya, kita telah membahas Routing dan Fungsi View pada Flask. Kali ini, kita akan belajar materi selanjutnya dengan membahas Flask Templates dan Forms, yang merupakan kunci penting dalam membangun aplikasi web yang interaktif dan responsif. Dengan mempelajari konsep ini, Anda akan mampu membuat tampilan yang menarik dan mudah diakses oleh pengguna, serta mengumpulkan dan memproses data yang dikirim melalui formulir. Yuk, mari kita mulai!

Template

Stupenss, bayangkan jika Anda ingin membuat halaman web yang terdiri dari banyak elemen, seperti gambar, teks, tombol, dan lain sebagainya. Bayangkan jika setiap kali Anda membuat halaman baru, Anda harus menuliskan semua kode HTML-nya dari awal, termasuk struktur, tata letak, dan styling. Tentunya itu akan memakan waktu dan sangat tidak efisien, bukan?

Nah, disinilah Flask Templates hadir sebagai penyelamat. Template adalah file HTML yang memiliki struktur dasar dan bisa digunakan kembali berulang kali. Dalam Flask, Anda bisa menggunakan template untuk membuat halaman web secara efisien dan mudah. Anda hanya perlu menentukan bagian-bagian tertentu yang perlu diganti, seperti judul, teks, gambar, dan lain lain, dan Flask akan memasukkan informasi tersebut ke dalam template yang sudah Anda buat sebelumnya.

Dengan menggunakan template pada Flask, Anda dapat membuat halaman web dengan cepat dan mudah, serta memperbarui tampilan situs Anda secara konsisten tanpa harus menulis ulang kode HTML yang sama berulang kali. Bagaimana, menarik bukan?

kamu hanya perlu mengimport package render_template kedalam file app kamu from flask import Flask, render_template

Stupenss, setelah menambahkan package render_template pada flask app, selanjutnya kita perlu memanggilnya ke dalam routing yang kita buat. Untuk melakukan hal ini, Anda bisa menggunakan fungsi render_template() yang disediakan oleh Flask.

render_template() adalah sebuah fungsi yang digunakan untuk merender atau menampilkan template HTML pada aplikasi Flask. Fungsi ini akan mencari template dengan nama yang sesuai di direktori templates pada aplikasi Flask Anda, lalu akan menggabungkan data yang dibutuhkan dengan template tersebut. Hasil akhirnya adalah sebuah halaman web yang lengkap dengan tampilan, konten, dan interaksi yang Anda tentukan.

Berikut adalah contoh penggunaan fungsi render_template() pada Flask:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

def index():

return render_template('index.html')

Dalam contoh di atas, kita menggunakan fungsi render_template() untuk menampilkan template 'index.html' pada aplikasi Flask. Lalu kita buat direktori baru bernama templates setelah itu tambahkan file .html ke dalamnya.

Dalam contoh ini kita namakan saja filenya index.html, lalu kita buat halaman html di dalamnya, kita buat halaman sederhana saja.

<!DOCTYPE html>

<head>

<title>Testing</title>

</head>

<body>

<h1>Haloo Selamat Datang</h1>

</body>

</html>

setelah itu kita coba jalankan aplikasinya dengan perintah flask run pada terminal. kemudian kita buka browser kita dan masukkan alamat lokal servernya.

Kita sudah berhasil nih menjalankan template html yang kita buat, jadi file index.html ini pangil oleh app.py melalui perintah render_template() mudah bukan?

Kita juga mengirimkan data yang berisi nilai tertentu ke dalam template tersebut dengan cara menambahkan parameter di dalam perintah render_template() ,berikut contohnya :

@app.route('/')

def index():

return render_template('index.html', nama='Stupenss')

disini kita tambahkan parameter nama dan kita isikan nilai string Stupenss, nilai ini bisa digunakan di dalam template untuk menampilkan pesan yang dipersonalisasi, selanjutnya kita tambahkan perintah {{<parameter>}} pada file index.html untuk memanggil nilai dalam parameter yang kita buat.

<!DOCTYPE html>

<head>

<title>Testing</title>

</head>

<body>

<h1>Haloo Selamat Datang {{nama}} !</h1>

</body>

</html>

Seperti contoh di atas kita bisa tambahkan tanda {{nama}} karena kita akan memanggil parameter nama yang kita tulis dalam file app.py, parameter nama akan memanggil nilai string Stupenss yang kemudian ditampilkan pada halaman html kita.

Nah kita sudah berhasil menambahkan data kedalam file template kita nih Stupenss, mudah bukan?

Form Templates

Nah setelah kita memahami cara kerja template pada flask, selanjutnya kita akan mencoba membuat templates untuk form, pada form templates ini kita akan mencoba menambahkan method POST , langsung saja ke stepnya yuk!

1. Kita buat dulu templates form kita pada file html baru, kita beri nama form.html jangan lupa, buatnya didalam folder template ya.

<!DOCTYPE html>

<head>

<title>Form Mahsiswa</title>

</head>

<body>

<br>

<button>Kirim</button>

</form>

</body>

</html>

Pada contoh diatas form ini kita berikan action {{url_for(hello)}} ini nanti akan memanggil method hello pada app.py dan kita berikan method post karena akan mengirimkan data, mari kita lihat apa yang ada dalam app.py

2. Pada file app.py kita akan menambahkan method baru yang kita beri nama hello.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')

def index():

return render_template('form.html')

@app.route('/hello', methods=['POST'])

def hello():

nama = request.form.get('nama')

universitas = request.form.get('universitas')

return render_template('index.html', nama=nama, universitas=universitas)

Pada baris kode app.py diatas dapat stupenss lihat kita menambahkan package baru yang kita impor yaitu request method ini berfungsi untuk mengambil data yang diinputkan oleh user, lalu disini juga ditambahkan routes dan method baru yang bernama hello, pada routes itu kita berikan method POST karena akan mengirim data yang ada di form, lalu kita buat parameter untuk menampung data nama dan universitas yang mengambil data dari form, kemudian nanti akan di render pada halaman index.html

kita juga mengubah routes / yang akan menampilkan halaman form, jadi ketika kita menjalankan aplikasi ini akan langsung mengarah ke halaman form.

3. Selanjutnya kita akan modifikasi sedikit halaman index html yang sudah kita buat untuk menampilkan data dari form.

<!DOCTYPE html>

<head>

<title>Haloo {{nama}}!</title>

</head>

<body>

<h1>Haloo Selamat Datang {{nama}} !</h1><br>

<h1>Universitas {{universitas}} !</h1>

</body>

</html>

4. Kita coba jalankan appnya lalu kita masukan data ke dalam formnya

Flask Templates and Forms 6

✨ ^{Hore Stupenss! kamu telah
belajar membuat template dan form sederhana dengan} menggunakan flask, semoga materi yang disampaikan dapat dipahami ya, jika ada

kesulitan silahkan bertanya ya, jangan lupa untuk mengerjakan quiz dan di bawah juga ada referensi yang dapat kamu gunakan untuk mendalami materi! Semangat belajar Stupenss.

Quiz

1. Apa itu Flask Templates?

a. File CSS pada Flask

b. File HTML pada Flask yang digunakan untuk membuat tampilan halaman web c. File JavaScript pada Flask

d. File Python pada Flask

2. Apa fungsi dari render_template() pada Flask?

a. Menampilkan data dari basis data

b. Membuat halaman web menggunakan Flask

c. Memproses data yang dikirim melalui formulir

d. Menghubungkan template dengan aplikasi Flask

3. Bagaimana cara mengirimkan data ke dalam template pada Flask? a. Dengan menggunakan fungsi send() pada Flask

b. Dengan menambahkan data ke dalam URL