Sunday, October 11, 2020

Belajar Membuat Navbar Dengan Menggunakan Bootstrap 4 Bagi Pemula

Belajar Membuat Navbar dengan Bootstrap


Tutorial Membuat Navbar dengan Bootstrap 4

Navbar adalah elemen penting dari suatu website atau sebuah aplikasi. Navbar sangat berfungsi untuk membuat user atau pengguna menjadi lebih nyaman. Tanpa adanya navbar yang jelas, kemungkinan besar user atau calon user pun akan kebingungan untuk menjelajahi lebih jauh, baik itu suatu website atau aplikasi. Untuk itulah, disini kita akan membahas bagiamana sih cara membuat navbar menggunakan Bootstrap 4?

Mengapa harus belajar menggunakan Bootstrap ?

Hal utama untuk menjawab soal ini adalah, karena bootstrap sangat mudah untuk di gunakan. Apalagi bagi kamu yang tidak memahami mengenai sebuah kode - kode atau yang baru belajar mengenai programming. 

Bootstrap memberikan fasilitas dan edukasi yang cocok bagi mereka yang ingin terjun ke dalam pembelajaran programming. Apalagi untuk kamu yang ingin memiliki sebuah website sendiri. Tentu, bootstrap dapat membantu kamu dalam membuat website impianmu. 

Kita kembali ke permasalah awal kita yaitu cara membuat Navbar dengan menggunakan Bootstrap. 

Ini adalah kode awal yang di gunakan bila menggunakan Bootstrap 4 ;

<!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.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <!-- Optional JavaScript -->
    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html> 

Dan ini adalah halaman yang terbuat dari hasil kode tersebut;

Belajar Bootstratp 4

Perlu diingat, kamu pastikan memasukan kode JS serta CSS nya yang ini;

Ini JS

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Ini CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


Navbar 


Selanjutnya, mari kita buat terlebih dahulu Navbar nya. Disini akan ada 2 contoh kode, yang pertama adalah Nav link, sedangkan yang kedua adalah Nav heading.

Ini adalah kode untuk Nav link
 <!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

Ini adalah kode untuk Nav heading 
 <!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav> 

Dari kedua kode tersebut, kamu akan melihat sebuah perbedaan. Ya, dimana di salah satu kode tersebut terdapat sebuah link, artinya bila dilakukan klik terhadap navbar tersebut, tentu akan mengarah ke alamat url yang terdapat di navbar. Sedangkan, untuk navbar heading, ia hanya berfungsi sebagai head saja, artinya bila di klik ia tidak akan mersepon apapun. 

Nav Logo 

Dalam membuat navigasi yang ingin menggunakan gambar atau logo, kamu bisa menggunakan kode berikut ini. Disini akan ada 2 jenis kode yang bisa kamu gunakan. Pertama adalah gambar saja, kemudian yang kedua adalah gambar di tambah text. 


Ini adalah kode yang kamu gunakan hanya untuk gambar saja:

 <!-- Hanya Gambar -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="url gambar kamu" width="30" height="30" alt="" loading="lazy">
  </a>
</nav> 


Ini adalah kode yang bisa kamu gunakan untuk menampilkan gambar dan tulisan di Navbar

 <!-- Gambar dan Teks -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="url gambar kamu" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
    Bootstrap
  </a>
</nav> 



Untuk dapat mempelajarinya, bila kamu ingin menambahkan gambar pada Navbar menggunakan Bootsrap, kamu cukup mengingat menambahkan "class navbar-brand

Navigasi Link Menu


Navigasi menu biasanya selalu menyamping atau horizontal. Ini berfungsi untuk membuat tampilan web menjadi lebih luas dan navigasi yang nyaman dilihat. Dalam membuat navigasi link dalam web, kamu tentu perlu menambahkan atau mngedit beberapa kode yang ada, terlebih lagi bila kamu menggunakan Bootstrap. 

Dalam kode sebelumnya, kamu sudah membuat Navbar bukan, kemudian, bila ingin menambahkan beberapa menu ke dalam Navbar, kamu bisa tambahkan kode ini di kode pembukaan navbar : navbar-expand-lg 

Sebelum di tambahkan :

 <nav class="navbar navbar-light bg-light"> 

Setelah di tambahkan navbar-expand-lg

 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 

Setelah kamu menambahkan kode tersebut, langkah selanjutnya yang kamu harus lakukan adalah menuliskan kode untuk membuat sebuah navbar toggler. Ini sangat berfungsi untuk membuat Navbar kamu menjadi responsif. 

Kamu bisa tambahkan kodenya :
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button> 

Tambahkan kode itu setelah kode Nav logo atau brand. Kemudian mari kita mulai membuat beberapa menu yang akan di tampilkan di Navbar. Sebelum membuat menu - menu lainnya, kamu harus menambahkan :

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
     ......
    </ul>
</div> 

Dengan menggunakan kode ini, kamu akan mudah untuk mengedit beberapa menu yang ada di Navbar nantinya. 

Selanjutnya membuat menu lainnya, kamu bisa menggunakan kode ini :

 <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="#">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu 2</a>
      </li> 

Kamu bisa mengubah link tujuan yang bertanda # dengan link yang kamu inginkan. Kemudian kamu juga bisa merubah nama menu seperti Menu 1 dan Menu 2 dengan mudah.

Seandainya kamu ingin menggunakan dropdown menu, tentu bisa saja dengan menggunakan kode ini :

 <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Sub menu 1</a>
          <a class="dropdown-item" href="#">Sub menu 2</a>
          <a class="dropdown-item" href="#">Sub menu 3</a>
        </div>
      </li> 

Jadi, keseluruhan kode pada Navigasi Link Menu menjadi seperti ini : 


Form Pencarian

Setelah kamu sudah membuat heading, kemudian menu - menu lainnya di Navbar, selanjutnya kamu bisa membuat menu atau form untuk pencarian. Biasanya form kecil ini berada di pojok dari sebuah website. 

Untuk membuatnya, kamu cukup perlu menambahkan kode ini setelah kode dari menu </ul>, ini adalah kodenya :

 <form class="form-inline">
    <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> 

Setelah menambahkan kode tersebut, tentunya Navbar yang kamu buat sudah mulai sempurna. Kamu sudah membuat brand atau logo, kemudian sudah menambahkan beberapa menu - menu serta terakhir menambahkan form pencarian kecil di Navbar. 



Sampai disini, kamu tentu sudah melihat hasilnya bukan?. Horee, kamu sudah berhasil membuat navbar dengan menggunakan Bootstrap. Untuk melihat beberapa kode mulai dari awal hingga akhir, kamu bisa melihat kembali live demo dari atas hingga akhir. Disana ada beberapa kode serta pemenggalannya, sehingga tidak membuat kamu pusing. 

Tunggu artikel selanjutnya, masih mengenai pembahasan Bootstrap 4. Semoga dengan adanya tips dan penjelasannya ini, kamu akan mudah untuk belajar Bootstrap serta dapat membangun website sendiri dengan bantuan Bootstrap. 

25 comments

  1. Rajinnya buat tutorial pengaturcaraan. Okay untuk Navigasi bar dan semua berada di atas itu amat penting untuk memudahkan pembaca. Kebiasaanya Home, About dan Contact, Search dan MedSos berada di atas. Tapi depend kepada owner web / blog utk paparkan yang mana satu merekan inginkan. Semua itu boleh di selenggara jika tahu caranya. Baca blog ini lah kan. Hehe. Teruskan menulis ya. Well done! All the best!

    ReplyDelete
  2. Bagusnya sharing pasal coding sebegini. Rawlins tak pandai la nak buat code-code nie. Selalu download templat yang ready-made je. Thanks for sharing

    ReplyDelete
  3. LH tak pernah faham dengan code-code programming ni. Ambil yang dah sedia ada aje. Memang pening lah. Nice sharing though

    ReplyDelete
  4. Mudah aje kalau siapa yang pandai adjust edit codingnya tu..kalau jenis tak tau guna html tu, mau juling mata.. nanti nak cuba juga kalau nak tambah navbar baru nanti..

    ReplyDelete
  5. Bestnyaa bila tahu dan mahir selok-belok coding dan programming macam ni, thanks for sharing tutorial terperinci macam ni yea! Boleh jadi as rujukan nanti 👍🏻

    ReplyDelete
  6. Bagus la artikel awak sebab selalu bagi informasi yang berguna kepada para pembaca. Keep it up

    ReplyDelete
  7. This is a very useful information. It’s important for us content creators to know. Thank you for sharing this knowledge with me.

    ReplyDelete
  8. Good information sharing. Budak2 programmer atau baru nak belajar, mesti cari dkt google info mcm ni kan. Sy dh lama tinggalkan, tapi tengok coding tu faham la sikit2

    ReplyDelete
  9. Oh mai... Lama giler tak sentuh part coding... Dah return balik knowledge kat lecturer! Hahaha.. Interesting article to make our blog useful kan.. Byk lagi yang Kitkat kena explore about dunia blogger ni.. Ye la skrg macam baby blogger baru lahir in 2020..hehe...

    ReplyDelete
  10. Lama dah tak buat coding-coding ni. Sekarang macam complicated sangat dah codingnye. Hehe

    ReplyDelete
  11. Ilmu,skil dan kepintaran yang bagus sekali Tuhan kurnia pada
    mereka yg kepakaran dlm hal ini. Bukan mudah mau fahami dunia coding bagi saya. Madam memang 'failed' when it comes to this. Maybe dats why i start blogging with Blogspot. Drag n drop. Tak bisa fikir lebih ttg teknikalnya. Above all, good job 2u!

    ReplyDelete
  12. Fuh, sangat advanced ni. Saya masih lagi merangkak nak guna Wordpress dan Elementor.

    ReplyDelete
  13. lamanya dan edit coding coding ni. mungkin kena star banlik supaya blog lebih laju. tq di atas perkongsiannya

    ReplyDelete
  14. Wahh hebat ni pndai guna koding. Blog pon kalau boleh guna widget sedia ada je. Mmg xpandai nak explore koding ni. At least boleh refer cn kalau rasa nk belajar koding.

    ReplyDelete
  15. satu perkongsian yang bagus. kita tak pandai sangat pasal2 coding ni. simple2 boleh la. tq for sharing.

    ReplyDelete
  16. Wow thanks for the info. I m not good at all these coding work, usually i write and post jer, need to learn.

    ReplyDelete
  17. mudah fahami utk orang yang tak paham aturcara coding.. thanks sharing this info ya...

    ReplyDelete
  18. TB pun tak berapa faham sangat coding2 ni.. Dulu edit blog sendiri sampai migrain jadinya bila error.. Hahaha

    ReplyDelete


EmoticonEmoticon