Blog Details

Belajar Membuat Website dengan Flask Python Part 4 - Rendering Template / Pemasangan Template Bootsrap

Kita sudah masuk pada bagian selanjutnya yaitu Membuat Website Dengan Flask Python Part 4 – Rendering Template / Pemasangan Template Bootsrap. Dan kali ini kita akan menggabungkan flask dengan sebuah template. Dan dari sekalian framework css, yang paling saya sukai adalah bootsrap. Jadi pada kesempatn ini saya akan menggunakan bootsrap untuk templatingnya.

Kalau kita melihat kode sebelumna kita memiliki code seperti dibawah ini

	
@app.route("/")
def hello():
   return "Hello World!"

Itu hanya akan menunjukkan tulisan Hello Word ketika kita masuk pada halaman utama. Bagaimana jika kita ingin menuliskan sintak html agar tampilan kita lebih bagus, apalagi dengan menggunakan bootsrap yang kode htmlnya terlalu panjang.

Sebenarnya kita bisa memsang sintak html pada code diatas. Sebagaicontoh

	
@app.route("/")
def hello():
   return "<h1>TItle Dengan Tag H1</h1>"

Tapi dengan cara diatas akan sangat report jika kita memiliki banyak baris. Untuk itu kita perlu menggunakn fiture rendering template yang ada pada flask. Bagaimana caranya.?
Pertama tama kita import dulu render_template pada bagian atas

from flask import render_template

Setelah itu kita rubah returnya menjadi seperti dibawah ini

return render_template('hello.html')

Sehingga full code kita akan berubah menjadi seperti dibawah ini

from flask import Flask
from flask import render_template
app = Flask(__name__)


@app.route("/")
def hello():
    return render_template('hello.html')

Kita bikin folder templates pada direktori kita dan bikin file hello.html. dan isikan file starter bootstrap dengan kode dibawah ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <title>Hello, world!</title>
  </head>
  <body>
     
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <h1>Judul Web</h1>








    </div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Maka tampilah kita akan sedikit lebih bagus ya. Sudah menggunakan bootrap. Kita lanjut ke step selanjutnya. Tetap pantengin tutorial ini sampai habis ya.

Pages

Categories

Recent Posts

Convert text to pdf dengan python

Belajar Kivy ~ KIVY Language

PYQT5 – QTextEdit