Blog Details

Belajar Membuat Website dengan Flask Python Part 6 - Membuat Kerangka Halaman Utama

Setelah anda mempelajari Part 1 sampai part 5 , mari kita lanjut ke bagian 6 yaitu dengan tema Belajar Membuat Website dengan Flask Python Part 6 – Membuat Kerangka Halaman Utama.

Sekarang kita akan membuat 3 halaman untuk pag standar sebuah website. Yaitu home, about , dan juga contact. Untuk itu silahkan teman teman semua membuat 3 buah file di folder templates, dengan nama home.htmlabout.htm, dan juga contact.html.

Selain itu kita membenahi file base_layout.html sebagai dasar layout yang akan dipakai, serta membuat file footer.html untuk memecah kode layout agar tidak terlalu besar.

Isi File base_layout.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    {% block head %}
      <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">
    {% endblock head %}
    <title>{% block metatitle %}Hello, world!{% endblock %}</title>
  </head>
  <body>
     
    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         
         <a class="navbar-brand" href="/">
          <img src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
        </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 active">
              <a class="nav-link" href="/about">About</a>
            </li>
           <li class="nav-item active">
              <a class="nav-link" href="/contact">Contact Us</a>
            </li>
           
          </ul>
          <form action="/" class="form-inline my-2 my-lg-0">
            <input name="s" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <div id="title" class="row">
        <div class="col">
          <h1>{% block title %} Halaman About {% endblock %}</h1>
        </div>
         
      </div>


       <div id="content" class="row">
        <div class="col">
          {% block content %}{% endblock %}
          
        </div>
         
      </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>


      <footer>
        <div class="row  mt-5">
          <div class="col">


            <div class="navbar bg-primary">
                 {% include "footer.html" %}   
                 {% block footer %}{% endblock %}
            </div>
          
          </div>    
        </div>
      </footer>


    </div>
  </body>
</html>

Isi File footer.html

<span style="color:white">Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.</span>

Isi File home.html

{% extends "base_layout.html" %}
{% block head %}{{ super () }}{% endblock %}
{% block metatitle %}Home {% endblock %}
{% block title %}Home {% endblock %}
{% block content %}
Nulla ac viverra arcu. Sed a placerat neque, vitae rutrum velit. Aenean hendrerit tortor venenatis, tincidunt tellus facilisis, gravida leo. Nam ullamcorper nisi nunc, ac accumsan arcu cursus sed. Curabitur pharetra vestibulum ante. Vivamus ultricies aliquam ullamcorper. Etiam congue, tortor a vestibulum hendrerit, enim nunc scelerisque nisi, in ultricies nulla enim et orci. Curabitur ac dolor nec lacus imperdiet scelerisque non at turpis. Proin auctor lobortis iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Aliquam eu aliquam diam. Praesent dapibus eros a tellus finibus, sit amet egestas augue hendrerit. Integer a tellus ac nunc imperdiet fermentum eget at enim. Nunc ut lorem a nibh facilisis efficitur eget gravida purus. Donec ac lectus facilisis, suscipit sapien eu, pulvinar urna. Phasellus sed dignissim quam. Integer mollis aliquet vulputate. Quisque scelerisque eleifend augue, eu hendrerit enim vulputate nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris non malesuada est, a convallis erat. Donec vel condimentum nisi.
{% endblock %}
{% block footer %}{% endblock %}

Isi File about.html

	
{% extends "base_layout.html" %}
{% block head %}{{ super () }}{% endblock %}
{% block metatitle %} About {% endblock %}
{% block title %} About {% endblock %}
{% block content %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec enim orci. Pellentesque fringilla diam tempus arcu sollicitudin cursus. Donec dapibus placerat lacus, eget pellentesque nibh scelerisque eu. Donec fermentum placerat sem, at malesuada purus euismod vitae. Ut interdum ante in ornare aliquet. Etiam sit amet sodales purus. Aenean consequat hendrerit posuere. Maecenas ac turpis at velit gravida gravida ut vitae lectus. Nam nisl orci, pretium non aliquam quis, dictum in odio. Fusce egestas, lectus sed lacinia dapibus, dolor enim sodales urna, sed mollis arcu mi eget ex.


Nam est enim, maximus placerat faucibus non, malesuada ut neque. Vestibulum aliquet risus feugiat urna vestibulum, ut rhoncus orci mollis. Curabitur euismod diam turpis, quis congue dolor pellentesque in. Mauris vitae ultricies ex. Etiam congue nisi neque, ultrices luctus lectus interdum at. In euismod tristique nibh eu ullamcorper. Integer lacinia eget odio nec fermentum. Donec porttitor eleifend ligula, at pellentesque purus sagittis vitae. Sed varius, ante ac viverra pulvinar, est orci viverra dolor, sed congue nunc eros laoreet ligula. Donec maximus massa et nisl maximus, ac ornare enim aliquam. Proin rhoncus enim turpis, et mattis ex tempor nec. Quisque consectetur elit ac ante mattis iaculis.


Donec faucibus ex nibh, at hendrerit nulla viverra at. Aliquam erat volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ornare volutpat lectus. Maecenas condimentum venenatis nisi a vehicula. Aenean quis ipsum nec eros vehicula tempor sed sit amet velit. Pellentesque ut posuere nunc. Vivamus ac lectus dui. Donec est erat, placerat eget tincidunt a, congue non ligula. Nulla ipsum lacus, ultricies blandit sem a, accumsan accumsan neque. Proin interdum leo blandit malesuada placerat. Fusce non sodales velit. Suspendisse sodales quam ac felis gravida imperdiet.
{% endblock %}
{% block footer %}{% endblock %}

Isi File contact.html

	
{% extends "base_layout.html" %}
{% block head %}{{ super () }}{% endblock %}
{% block metatitle %} Contact Us {% endblock %}
{% block title %} Contact Us {% endblock %}
{% block content %}


  <form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>


{% endblock %}
{% block footer %}{% endblock %}

Kemudian kita akan memberikan modifikasi untuk merubah route di file index.py anda bisa mengubahnya menjadi kode seperti dibawah ini.

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


@app.route("/")
def home():
    return render_template('home.html')
@app.route("/about")
def about():
    return render_template('about.html')
@app.route("/contact")
def contact():
    return render_template('contact.html')

Coba sekrang jalankan maka flask akan memiliki menu dan halaman dengan 3 buah halaman yaitu home, about dan contact. Ok kita lanjut pada part selanjutnya.