Python Flask Framework Templating Menggunakan Bootstrap

March 30, 2018
Bagi kalian yang baru pertama kali mencoba Flask saya sarankan untuk mencoba membuat basic "Hello Word" terlebih dahulu.

Templating atau pembuatan template project sangat penting dan harusnya dibuat seefektif mungkin agar performa aplikasi menjadi maksimal. Pada tulisan kali ini saya akan menjelaskan bagaimana pembuatan template dasar menggunakan Flask Framework dengan struktur folder dan file sebagai berikut:

app.py
   /templates
       /includes
            _navbar.html
       /layout.html
       /home.html
       /about-us.html
       /contact-us.html

Install Flask Framework

Buka command prompt kemudian ketik perintah dibawah ini:

pip install flask


Membuat file app.py

Pada folder project anda silahkan buat sebuah file python baru dengan nama app.py dan ketikkan script dibawah ini:

app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('home.html')

@app.route('/about-us')
def aboutUs():
    return render_template('about-us.html')

@app.route('/contact-us')
def contactUs():
    return render_template('contact-us.html')

if __name__ == '__main__':
    app.run(debug=True)

Pada file app.py hal yang pertama kali dilakukan adalah mengimport library dari flask itu sendiri dan render_template
from flask import Flask, render_template

Kemudian mendeklarasikan project Flask kedalam variabel app
app = Flask(__name__)

File app.py menyimpan daftar route aplikasi dimana setiap halaman website memiliki route dengan satu atau beberapa define function (method) disingkat def. Route dan def diketik dengan level yang sama (sejajar).

Ini dalah nama route
@app.route('/')

Sedangkan ini adalah nama define function (method) untuk route '/'
def index():

Method diatas mereturn (mengembalikan) data berupa file html
    return render_template('home.html')

Pada baris akhir adalah code untuk menjalankan web service aplikasi flask dengan default ip 127.0.0.1 (localhost) dan default port 5000
if __name__ == '__main__':
    app.run(debug=True)


Membuat Folder Templates dan Includes

Setelah membuat file app.py langkah selanjutnya adalah membuat folder templates kemudian didalam folder tersebut dibuat satu folder lagi dengan nama includes. Semua halaman html akan diletakkan didalam folder templates dan _navbar.html akan diletakkan di folder includes.


Membuat File layout.html

layout.html adalah file html yang diletakkan didalam folder templates, digunakan sebagai template dasar untuk halaman html yang lainnya pada file layout.html berisi title, css, dan js aplikasi utama kemudian setiap halaman (home.html, about-us.html & contact-us.html) akan meng-extends (mengikut) ke layout.html, sehingga anda tidak perlu mengetik keseluruhan code html ke setiap page.

Pada file layout.js ini kita gunakan CDN Bootstrap 

templates/layout.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{% block title %} {% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>

{% include 'includes/_navbar.html' %}

{% block body %} {% endblock %}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Yang perlu diperhatikan disini adalah cara membuat block dan include sebagai lokasi konten setiap halaman yang meng-extends layout.html,  setiap block harus diakhiri dengan endblock kecuali pada include.

Pada file layout.html terdapat dua (2) block yaitu title dan body

block title
<title>{% block title %} {% endblock %}</title>

Setiap halaman yang men-set block title akan menampilkan title (judul pada tab browser) didalam tag title sesuai dengan data yang ada didalamnya.

include _navbar.html
{% include 'includes/_navbar.html' %}

Pada file layout disematkan _navbar.html melalui tag include yang berisi tag navigasi utama website

block body
{% block body %} {% endblock %}

Setiap halaman yang men-set block body akan menampilkan data didalam tag body sesuai dengan data yang ada didalamnya.


Membuat File __navbar.html

File _navbar.html adalah halaman html yang menampilkan navigation bar atau menu navigasi utama website.

templates/includes/_navbar.html
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flask Framework</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about-us">About Us</a>
</li>
<li>
<a href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>

Membuat halaman home.html, about-us.html dan contact-us.html

templates/home.html
{% extends 'layout.html' %}

{% block title %} Home {% endblock %}

{% block body %}
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron
and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
</p>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
odio dui. </p>
<p>
<a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
odio dui. </p>
<p>
<a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis
euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
justo sit amet risus.</p>
<p>
<a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
</div>
</div>
{% endblock %}

templates/about-us.html

{% extends 'layout.html' %}

{% block title %} About Us {% endblock %}

{% block body %}
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- /.container -->
{% endblock %}

templates/contact-us.html
{% extends 'layout.html' %}

{% block title %} Contact Us {% endblock %}

{% block body %}
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<legend class="text-center header">Contact us</legend>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-1">
<textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days."
rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col-md-6">
<div>
<div class="panel panel-default">
<div class="text-center header">Our Office</div>
<div class="panel-body text-center">
<h4>Address</h4>
<div>
2217 Washington Blvd
<br /> Washington DC
<br /> #(703) 1234 1234
<br /> service@company.com
<br />
</div>
<hr />
<div id="map1" class="map">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}



Testing Aplikasi

Setelah membuat app.py, layout.html, _navbar.html, home.html, about-us.html dan contact-us.html selajutnya kamu bisa tes menggunakan perintah python app.py

python app.py

Kemudian mengakses http://localhost:5000 pada browser



Video Tutorial Flask Bootstrap Template

2 comments:

  1. Enjoyed reading the article above, really explains everything in detail, the article is very interesting and effective. Thank you and good luck for the upcoming articles Python Programming Training

    ReplyDelete

Powered by Blogger.