Belajar Web Design : Membuat List Produk menggunakan Bootstrap

Update Terakhir pada

Pada kesempatan kali ini, kita akan membuat list produk menggunakan produk menggunakan Bootstrap.

Tentunya kita pernah mengunjungi toko-toko online, kita selalu melihat daftar dari produk-produk yang dijual di toko online tersebut.

Disitu biasanya terdapat informasi tentang nama produknya, foto produknya, sampai harga dan lain sebagainya.

Tujuannya, supaya kita dapat mengetahui informasi tentang produk yang kita cari lalu selanjutnya apakah produk tersebut meiliki spesifikasi yang sesuai kebutuhan kita atau tidak.

Nah, jika sesuai kita beli jika tidak berarti kita akan mencari produk lainnya.

Pada postingan artikel ini, kita akan membuat daftar produk tersebut.

Seperti biasanya kita perlu instalasi pendukung Bootstrapnya (https://www.webhozz.com/blog/belajar-web-design-mengenal-bootstrap/).

Diperlukan juga beberapa komponen dari Bootstrap, seperti yang pernah ada postingan artikel sebelumnya, disini (https://www.webhozz.com/blog/belajar-bootstrap-membuat-slideshow-dan-section/).

Untuk membuat daftar produk dari Bootstrap, diperlukan komponen berikut.

  • Navbar, External Content. Untuk Navigasi alias header menu pada website (https://getbootstrap.com/docs/4.3/components/navbar/#external-content).
  • Jumbotron, komponen yang ringan serta fleksibel untuk menampilkan pesan utama (https://getbootstrap.com/docs/4.3/components/jumbotron/).
  • Container, untuk menambahkan ruang untuk badan utama fitur atau konten(https://getbootstrap.com/docs/4.3/layout/overview/#containers).
  • Card, untuk menampilkan list produk berupa foto dan sedikit deskripsi(https://getbootstrap.com/docs/4.3/components/card/#example).
    Oke, langsung aja kita mulai.

1 Buat file HTML, lalu instalasi Bootstrap.

<!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>Daftar Produk</title>
  </head>
  <body>
    

    <!-- 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>

2. Sediakan beberapa foto produk, minimal 6 aja buat bahan. Lalu selanjutnya simpan aja dalam folder khusus.

3. Pada tag <body></body>, tepatnya setelah tag <body> masukkan Navbar External Content(https://getbootstrap.com/docs/4.3/components/navbar/#external-content).

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h5 class="text-white h4">Webhozz Shop</h5>
      <span class="text-muted">Menjawab Kebutuhan IT Anda</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

4. Maka akan tampil seperti ini pada browser.

Akan tetapi, jika kita klik menu pada tanda merah maka akan muncul tampilan lagi.

5. Tambahkan Jumbotron setelah Navbar yang kita buat pada langkah 3.

<div class="jumbotron">
    <center>
        <h1 class="display-4">Produk Berkualitas</h1>
        <p class="lead">Harga Pas, Produk Berkualitas</p>
        <hr class="my-4">
        <p>Belanja Mudah dan Gak Ribet</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Cek Produk</a>
    </center>
</div>

6. Maka, seperti inilah tampilan pada browser.

7. Tambahkan Container, setelah selesai Jumbotron tadi.

<div class="container">
            
  </div>

Untuk container ini cuma sekedar ruangan aja. Tadi begitu direfresh pada halaman tidak kelihatan apa-apa.
Tapi jika ada elemen atau konten di dalamnya maka akan terlihat ukuran ruangannya.

8. Masukkan Card, ke dalam Container. Tepatnya di tengahnya tag <container></container>.

<div class="card" style="width: 18rem; float: left; margin: 40px;">
    <img src="gambar/kemeja_adj.webp" class="card-img-top" alt="Kemeja Adj">
    <div class="card-body">
        <h5 class="card-title">Kemeja ADJ</h5>
        <p class="card-text">Rp 75.000,-</p>
        <a href="#" class="btn btn-warning">Detail</a>
        <a href="#" class="btn btn-danger">Beli</a>
    </div>
</div>

<div class="card" style="width: 18rem; float: left; margin: 40px;">
    <img src="gambar/kemeja_hitam_bufalo.webp" class="card-img-top" alt="Kemeja Hitam Buffalo">
    <div class="card-body">
        <h5 class="card-title">Kemeja Buffalo</h5>
        <p class="card-text">Rp 80.000,-</p>
        <a href="#" class="btn btn-warning">Detail</a>
        <a href="#" class="btn btn-danger">Beli</a>
    </div>
</div>

<div class="card" style="width: 18rem; float: left; margin: 40px;">
    <img src="gambar/kemeja_putih_hitamgaris.webp" class="card-img-top" alt="Kemeja Putih Hitam Garis">
    <div class="card-body">
        <h5 class="card-title">Kemeja Putih Garis</h5>
        <p class="card-text">Rp 87.000,-</p>
        <a href="#" class="btn btn-warning">Detail</a>
        <a href="#" class="btn btn-danger">Beli</a>
    </div>
</div>

<div class="card" style="width: 18rem; float: left; margin: 40px;">
    <img src="gambar/kemeja_simeo.jpg" class="card-img-top" alt="Kemeja Simeo">
    <div class="card-body">
        <h5 class="card-title">Kemeja Simeo</h5>
        <p class="card-text">Rp 90.000,-</p>
        <a href="#" class="btn btn-warning">Detail</a>
        <a href="#" class="btn btn-danger">Beli</a>
    </div>
</div>

<div class="card" style="width: 18rem; float: left; margin: 40px;">
    <img src="gambar/putih_kerahbatik.jpg_.webp" class="card-img-top" alt="Putih Kerah Batik">
    <div class="card-body">
        <h5 class="card-title">Putih Kerah Batik</h5>
        <p class="card-text">Rp 75.000,-</p>
        <a href="#" class="btn btn-warning">Detail</a>
        <a href="#" class="btn btn-danger">Beli</a>
    </div>
</div>

<div class="card" style="width: 18rem; float: left; margin: 40px;">
    <img src="gambar/kemeja_adj_red.webp" class="card-img-top" alt="Kemeja Adj Red">
    <div class="card-body">
        <h5 class="card-title">Kemeja ADJ Red</h5>
        <p class="card-text">Rp 75.000,-</p>
        <a href="#" class="btn btn-warning">Detail</a>
        <a href="#" class="btn btn-danger">Beli</a>
    </div>
</div>

Pada tag di atas terdapat <div class=”card” style=”width: 18rem; float: left; margin: 40px;”>.

Untuk float dan margin itu adalah custom dari kita sendiri.

Pada tag <img> juga diberikan link folder dimana file gambar yang tadinya sudah kita siapkan.

9. Scroll aja setelah jumbotron tadi. Maka seperti ini tampilan pada browser.

Lalu scroll lagi ke bawahnya dikit.

10. Tuliskan script untuk membuat Footer setelah Container.

<footer class="text-muted" style="clear: both;">
    <hr>
    <div class="container">
        <p class="float-right">
            <a href="#">Back to top</a>
        </p>
        <p>Copyright 2019 © Webhozz</p>
    </div>
</footer>

Pada script di atas ada tambahan class=””, seperti “text-muted” dan “float-right”.

Nah, itu terdapat pada menu Utilites Bootstrap disini (https://getbootstrap.com/docs/4.3/utilities/borders/).

Lalu ada tambahan custom style=”clear: both;”.

Tujuannya adalah supaya tidak terkena efek “float:left;” pada Card yang sudah kita buat sebelumnya.

11. Letaknya paling bawah, seperti inilah tampilannya pada browser.

12. Seperti inilah script kode secara keseluruhan.

<!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>Daftar Produk</title>
  </head>

  <body>

      <div class="pos-f-t">
          <div class="collapse" id="navbarToggleExternalContent">
              <div class="bg-dark p-4">
                  <h5 class="text-white h4">Webhozz Shop</h5>
                  <span class="text-muted">Menjawab Kebutuhan IT Anda</span>
              </div>
          </div>
          <nav class="navbar navbar-dark bg-dark">
              <button class="navbar-toggler" type="button" data-toggle="collapse"
                  data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
                  aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
          </nav>


          <div class="jumbotron">
              <center>
                  <h1 class="display-4">Produk Berkualitas</h1>
                  <p class="lead">Harga Pas, Produk Berkualitas</p>
                  <hr class="my-4">
                  <p>Belanja Mudah dan Gak Ribet</p>
                  <a class="btn btn-primary btn-lg" href="#" role="button">Cek Produk</a>
              </center>
          </div>

          <div class="container">
              <div class="card" style="width: 18rem; float: left; margin: 40px;">
                  <img src="gambar/kemeja_adj.webp" class="card-img-top" alt="Kemeja Adj">
                  <div class="card-body">
                      <h5 class="card-title">Kemeja ADJ</h5>
                      <p class="card-text">Rp 75.000,-</p>
                      <a href="#" class="btn btn-warning">Detail</a>
                      <a href="#" class="btn btn-danger">Beli</a>
                  </div>
              </div>

              <div class="card" style="width: 18rem; float: left; margin: 40px;">
                  <img src="gambar/kemeja_hitam_bufalo.webp" class="card-img-top" alt="Kemeja Hitam Buffalo">
                  <div class="card-body">
                      <h5 class="card-title">Kemeja Buffalo</h5>
                      <p class="card-text">Rp 80.000,-</p>
                      <a href="#" class="btn btn-warning">Detail</a>
                      <a href="#" class="btn btn-danger">Beli</a>
                  </div>
              </div>

              <div class="card" style="width: 18rem; float: left; margin: 40px;">
                  <img src="gambar/kemeja_putih_hitamgaris.webp" class="card-img-top" alt="Kemeja Putih Hitam Garis">
                  <div class="card-body">
                      <h5 class="card-title">Kemeja Putih Garis</h5>
                      <p class="card-text">Rp 87.000,-</p>
                      <a href="#" class="btn btn-warning">Detail</a>
                      <a href="#" class="btn btn-danger">Beli</a>
                  </div>
              </div>

              <div class="card" style="width: 18rem; float: left; margin: 40px;">
                  <img src="gambar/kemeja_simeo.jpg" class="card-img-top" alt="Kemeja Simeo">
                  <div class="card-body">
                      <h5 class="card-title">Kemeja Simeo</h5>
                      <p class="card-text">Rp 90.000,-</p>
                      <a href="#" class="btn btn-warning">Detail</a>
                      <a href="#" class="btn btn-danger">Beli</a>
                  </div>
              </div>

              <div class="card" style="width: 18rem; float: left; margin: 40px;">
                  <img src="gambar/putih_kerahbatik.jpg_.webp" class="card-img-top" alt="Putih Kerah Batik">
                  <div class="card-body">
                      <h5 class="card-title">Putih Kerah Batik</h5>
                      <p class="card-text">Rp 75.000,-</p>
                      <a href="#" class="btn btn-warning">Detail</a>
                      <a href="#" class="btn btn-danger">Beli</a>
                  </div>
              </div>

              <div class="card" style="width: 18rem; float: left; margin: 40px;">
                  <img src="gambar/kemeja_adj_red.webp" class="card-img-top" alt="Kemeja Adj Red">
                  <div class="card-body">
                      <h5 class="card-title">Kemeja ADJ Red</h5>
                      <p class="card-text">Rp 75.000,-</p>
                      <a href="#" class="btn btn-warning">Detail</a>
                      <a href="#" class="btn btn-danger">Beli</a>
                  </div>
              </div>

          </div>

          <footer class="text-muted" style="clear: both;">
              <hr>
              <div class="container">
                  <p class="float-right">
                      <a href="#">Back to top</a>
                  </p>
                  <p>Copyright 2019 © Webhozz</p>
              </div>
          </footer>


          <!-- 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>

13. Seperti inilah tampilannya keseluruhan.

Saat tombol Togglenya ditekan.

Lalu kita scroll lagi ke bawah.

Nah, kira-kira seperti itulah caranya membuat list produk menggunakan Bootstrap.

Demikianlah, selamat mencoba dan semoga bermanfaat ya…