- Membuat fondasi untuk mengurangi pengulangan;
- Membagi halaman atas modul-modul kecil.
Mebuat Fondasi
Salah satu strategi utama dalam pembuatan suatu program adalah untuk menghindari pengulang. Strategi ini muncul bukan karena para programmer ini pada malas tetapi untuk menghindari kesalahan dikemudian hari.
Misalnya dalam suatu program, ada beberapa perhitungan yang memerlukan pemakaian konstanta Pi. Salah satu cara ini diprogram adakah dengan memasukkan angka 3,14 ke semua rumus yang membutuhkannya. Tetapi, seandainya nanti kita perlu menaikkan tingkat ketelitian perhitungan dan mengubah 3.14 ke 3.14159 maka kita harus mencari semua tempat yang memakai angka ini dan menggantinya secara manual. Cara lain untuk memprogram ini, yang lebih bagus, adalah dengan membuat sebuah konstanta bernama PI, memberikannya nila 3,14, dan semua perhitungan yang memerlukannya angka ini tinggal memakai konstanta tersebut. Dengan cara ini jika kita perlu mengubah 3.14 ke 3.14159 maka tinggal mengubah nilai konstantanya saja.
Strategi ini bisa kita terapkan juga pada aplikasi web dengan memanfaatkan templates. Caranya dengan membuat template dasar yang menjadi dasar bagi template-template lainnya. Isi template dasar ini bisa berupa berkas-berkas: CSS, Javascript, tag-tag META, dan lain-lain.
Mari kita lihat contohnya. Dalam contoh ini, template fondasi saya beri nama hlmFondasi.html yang akan diacu oleh template hlmLogin.html.
Isi hlmFondasi.html:
Nah bagaimana isi berkas hlmLogin.html:
Perhatikan di berkas ini ada dua tag khusus:Misalnya dalam suatu program, ada beberapa perhitungan yang memerlukan pemakaian konstanta Pi. Salah satu cara ini diprogram adakah dengan memasukkan angka 3,14 ke semua rumus yang membutuhkannya. Tetapi, seandainya nanti kita perlu menaikkan tingkat ketelitian perhitungan dan mengubah 3.14 ke 3.14159 maka kita harus mencari semua tempat yang memakai angka ini dan menggantinya secara manual. Cara lain untuk memprogram ini, yang lebih bagus, adalah dengan membuat sebuah konstanta bernama PI, memberikannya nila 3,14, dan semua perhitungan yang memerlukannya angka ini tinggal memakai konstanta tersebut. Dengan cara ini jika kita perlu mengubah 3.14 ke 3.14159 maka tinggal mengubah nilai konstantanya saja.
Strategi ini bisa kita terapkan juga pada aplikasi web dengan memanfaatkan templates. Caranya dengan membuat template dasar yang menjadi dasar bagi template-template lainnya. Isi template dasar ini bisa berupa berkas-berkas: CSS, Javascript, tag-tag META, dan lain-lain.
Mari kita lihat contohnya. Dalam contoh ini, template fondasi saya beri nama hlmFondasi.html yang akan diacu oleh template hlmLogin.html.
Isi hlmFondasi.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Rahmad Dawood">
<title>Aplikasiku
<!-- jQuery -->
<script src="static/js/jquery/1.5/jquery.min.js">
</script>
<!-- CSS kita -->
<link href="static/css/style.css" rel="stylesheet">
</link>
</head>
<body>
{% block isi %}{% endblock %}
</body>
</html>
Perhatikan disini saya telah menaruh tag khusus {% block isi %}{% endblock %} yang bertujuan untuk menandaikan bahwa disinilah tempat (=block) yang akan diisi oleh template-template lain yang memakai hlmFondasi.html sebagai fondasi. Perhatikan juga block ini saya beri nama: isi.Nah bagaimana isi berkas hlmLogin.html:
{% extends "hlmFondasi.html" %}
{% block isi %}
<h1>Mohon login</h1>
<form method="post" action="/login">
Username: <input type="text" name="txtUsername"> <br />
Password: <input type="password" name="txtPassword"> <br />
<input type="submit" name="btnSubmit" value="Submit">
</form>
{% endblock %}
- {% extends "hlmFondasi.html" %} yang mengatakan bahwa berkas ini akan memakai hlmFondasi.html sebagai fondasi dasar dan
- {% block isi %} ... {% endblock %} yang memerintahkan Jinja untuk mengambil isi antara kedua tag ini dan tempatkan di bagian yang telah ditandai block bernama isi pada template hlmFondasi.html.
Modul-modul Kecil
Kalau diperhatikan, suatu halaman web dapat dibagi-bagi atas beberapa modul dasar. Misalnya ada header, footer, menu dibagian atas, atau menu dibagian kiri. Bagian-bagian ini pasti sama pada semua halaman, sesuai dengan salah satu strategi utama dalam pembuatan program untuk tidak mengulangi sesuatu, oleh karenanya bagian-bagian ini pun dapat kita pecah-pecahkan atas modul-modul dalam berkas terpisah yang tinggal dimasukkan dan diacu oleh template lain saat diperlukan.
Sebagai contoh, umpamakan kita ada modul untuk header bernama modHeader.html yang akan dipakai ulang oleh template hlmLogin.html.
Berikut isi modHeader.html:
Nah dengan cara ini, jika kita mau mengubah header, misalnya mengubah tulisannya, tinggal mengubah berkas modHeader.html dan kesemua berkas yang memakai modul ini akan ikut berubah tampilannya.
Kembali ke: Belajar Flask
Sebagai contoh, umpamakan kita ada modul untuk header bernama modHeader.html yang akan dipakai ulang oleh template hlmLogin.html.
Berikut isi modHeader.html:
<div id="header">
<h1>Apakabar Dunia</h1>
<p>Ini header untuk aplikasiku</p>
<hr />
</div>
dan berikut isi hlmLogin.html yang kita ubah untuk memakai modul header ini:{% extends "hlmFondasi.html" %}
{% block isi %}
{% include "modHeader.html" %}
<h1>Mohon login</h1>
<form method="post" action="/login">
Username: <input type="text" name="txtUsername"> <br />
Password: <input type="password" name="txtPassword"> <br />
<input type="submit" name="btnSubmit" value="Submit">
</form>
{% endblock %}
Perhatikan diberkas ada tag {% include "modHeader.html" %} yang memerintahkan Jinja untuk menggantikan tag ini dengan isi dari berkas modHeader.html.Nah dengan cara ini, jika kita mau mengubah header, misalnya mengubah tulisannya, tinggal mengubah berkas modHeader.html dan kesemua berkas yang memakai modul ini akan ikut berubah tampilannya.
Kembali ke: Belajar Flask
makasih sekali informasinya, nice sharing
ReplyDeleteSama-sama...
Delete