Cara integrasi template html dengan python dan flask

Cara integrasi template html dengan python dan flask

Cara integrasi template html dengan python dan flask

Pada tutorial Cara integrasi template html dengan python dan flask kita akan belajar bagaimana mengintegrasikan proyek python dan flask karena Dimungkinkan untuk mengembalikan output dari fungsi yang terikat ke URL tertentu dalam bentuk HTML.¬†Misalnya, dalam skrip berikut,¬†fungsi¬†hello ()¬†akan membuat¬†‘Hello World’¬†dengan¬†tag <h1> yang¬†dilampirkan padanya.

Ubah Kode sebelumnya yang ada pada Membuat project pertama dengan python dan flask menjadi seperti dibawah ini

from flask import Flask

app = Flask(__name__)

@app.route('/')

def index():

   return '<html><title>Latihan Python dan Flask</title><body><h1>Hello World</h1></body></html>'

if __name__ == '__main__':

   app.run(debug = True)

 

Namun, membuat konten HTML dari kode Python itu rumit, terutama ketika data variabel dan elemen bahasa Python seperti kondisional atau loop perlu diletakkan. Ini akan membutuhkan seringnya keluar dari HTML.

Buat template terpisah

Di sinilah seseorang dapat memanfaatkan mesin template Jinja2 , yang menjadi dasar Flask. Alih-alih mengembalikan HTML hardcode dari fungsi, file HTML dapat dirender oleh fungsi render_template () . pertama buat folder templates terlebih dahulu dan file hello.html didalamnya

Flask akan mencoba mencari file HTML di folder templates, di folder yang sama dengan script ini.

  • Folder aplikasi
    • app. Py
    • templates
      • hello.html

Dan ubah kode sebelumnya menjadi seperti dibawah ini

from flask import Flask ,render_template

app = Flask(__name__)

@app.route('/')

def index():

return render_template(‚Äėhello.html‚Äô)

if __name__ == '__main__':

app.run(debug = True)

 

Istilah¬†‘sistem template web’¬†mengacu pada perancangan skrip HTML di mana data variabel dapat disisipkan secara dinamis.¬†Sistem templat web terdiri dari mesin templat, beberapa jenis sumber data, dan pemroses templat.

Flask menggunakan mesin template jinja2 . Template web berisi placeholder sintaksis HTML yang diselingi untuk variabel dan ekspresi (dalam hal ini ekspresi Python) yang menggantikan nilai saat template dirender.

Kode berikut disimpan sebagai hello.html di folder template.

<!doctype html>

<html>

<body>




<h1>Hello {{ name }}!</h1>




</body>

</html>

 

Selanjutnya, jalankan skrip berikut dari shell Python.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/hello/<user>')

def hello_name(user):

return render_template('hello.html', name = user)

if __name__ == '__main__':

app.run(debug = True)

 

Saat server pengembangan mulai berjalan, buka browser dan masukkan URL sebagai –¬†http: // localhost: 5000 / hello / mvl

Bagian variabel dari URL disisipkan di placeholder {{name}} .

Contoh Sistem Template Web

Mesin template jinja2 menggunakan pembatas berikut untuk keluar dari HTML.

  • {% …%} untuk Pernyataan
  • {{…}} untuk Ekspresi yang akan dicetak ke keluaran template
  • {# … #} untuk Komentar tidak disertakan dalam keluaran template
  • # … ## untuk Pernyataan Baris

Dalam contoh berikut, penggunaan pernyataan bersyarat di template didemonstrasikan. Aturan URL ke fungsi hello () menerima parameter integer. Ini diteruskan ke template hello.html . Di dalamnya, nilai angka yang diterima (tanda) dibandingkan (lebih besar atau kurang dari 50) dan karenanya HTML dirender secara bersyarat.

Script Python adalah sebagai berikut –

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/hello/<int:score>')

def hello_name(score):

return render_template('hello.html', marks = score)

if __name__ == '__main__':

app.run(debug = True)

 

Script template HTML¬†hello.html¬†adalah sebagai berikut –

<!doctype html>

<html>

<body>

{% if marks>50 %}

<h1> Your result is pass!</h1>

{% else %}

<h1>Your result is fail</h1>

{% endif %}

</body>

</html>

 

Perhatikan bahwa pernyataan kondisional if-else dan endif diapit oleh pemisah {% ..%} .

Jalankan skrip Python dan kunjungi URL http: // localhost / hello / 60 lalu http: // localhost / hello / 30 untuk melihat keluaran HTML berubah secara kondisional.

Konstruksi loop Python juga dapat digunakan di dalam template. Dalam skrip berikut, fungsi result () mengirimkan objek kamus ke template results.html ketika URL http: // localhost: 5000 / result dibuka di browser.

Bagian Template result.html menggunakan perulangan for untuk merender pasangan kunci dan nilai dari hasil objek kamus {} sebagai sel tabel HTML.

Jalankan kode berikut dari shell Python.

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/result')

def result():

dict = {'phy':50,'che':60,'maths':70}

return render_template('result.html', result = dict)

if __name__ == '__main__':

app.run(debug = True)

 

Simpan skrip HTML berikut sebagai result.html di folder template.

<!doctype html>

<html>

<body>

<table border = 1>

{% for key, value in result.items() %}

<tr>

<th> {{ key }} </th>

<td> {{ value }} </td>

</tr>

{% endfor %}

</table>

</body>

</html>

 

Di sini, sekali lagi pernyataan Python yang sesuai dengan perulangan For diapit dalam {% ..%} sedangkan, kunci ekspresi dan nilai diletakkan di dalam {{}} .

Setelah pengembangan mulai berjalan, buka http: // localhost: 5000 / result di browser untuk mendapatkan keluaran berikut.

Contoh Template Tabel

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us