Belajar Bootstrap : Membuat Slideshow dan Section

Update Terakhir pada

Sahabat Webhozz dimanapun berada, pada kesempatan kali ini kita akan belajar langsung untuk membuat sebuah halaman website.

Tentunya kita juga menggunakan Bootstrap.

Seperti pada postingan sebelumnya, kita membutuhkan instalasi Bootstrapnya terlebih dahulu.

Instalasi tersebut, bisa dikunjungi pada link berikut (https://www.webhozz.com/blog/belajar-web-design-mengenal-bootstrap/).

Kita juga akan menambahkan menu navbar, seperti postingan sebelumnya (https://www.webhozz.com/blog/membuat-navbar-bootstrap/).

Selain itu, juga kita memerlukan beberapa fitur dari Bootstrap seperti berikut ini:

  • Carousel, membuat slide gambar bergerak (https://getbootstrap.com/docs/4.3/components/carousel/#with-indicators).
  • Container, membuat badan utama menu (https://getbootstrap.com/docs/4.3/layout/overview/#containers).
  • Grid, membuat menu konten terpisah(https://getbootstrap.com/docs/4.3/layout/grid/#how-it-works).
  • Border, untuk membuat gambar berbentuk bulat (https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius).
  • Image border-radius, untuk memanggil file gambar bentuk bulat (https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius).
  • Button, untuk membuat tombol variasi (https://getbootstrap.com/docs/4.3/components/buttons/).

Dari semua fitur Bootstrap tersebut, kita akan membuat sebuah halaman website seperti tampilan berikut ini.


Saat discroll ke bawah lagi akan ada tampilan lanjutannya.

Lanjut discroll ke bawah lagi akan ada tampilan lanjutannya.

Hingga scroll sampai tampilan yang paling bawahnya.

Oke, langsung aja kita coba ya :

1 Buat sebuah file HTML, lalu masukkan script berikut ini, yaitu pemanggilan komponen 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>Belajar Bootstrap</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. Lalu kita sisipkan Navbar setelah tag <body>.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="index.html">Webhozz Training</a>
  <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>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Product</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Blog</a>
      </li>
    </ul>
  </div>
</nav>

3. Maka akan tampil gambar berikut ini pada browser.

4. Selanjutnya, sediakan beberapa file gambar. Yang mana gambar-gambar ini akan kita gunakan untuk membuat slidernya.

5. Lalu gunakan fitur Carousel dari Bootstrap, bisa dikunjungi disini (https://getbootstrap.com/docs/4.3/components/carousel/).

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="gambar/sunflower.jpg" class="d-block w-100" alt="Bunga Matahari">
            </div>
            <div class="carousel-item">
                <img src="gambar/ship.jpg" class="d-block w-100" alt="Kapal Berlayar">
            </div>
            <div class="carousel-item">
                <img src="gambar/lake.jpg" class="d-block w-100" alt="Danau">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

Pada script di atas, terdapat tag <img> serta atribut src=””. Nah disitu kita isikan nama file gambarnya.
Serta tambahan, masing-masing tag <img> ditambahkan atribut height=””. Tujuannya supaya gambarnya memiliki tinggi yang sama.

6. Maka akan tampil seperti ini pada browser.

7. Lalu kita gunakan fitur Container, Grid, Border, dan Button.

 <!--container-->
    <br>
    <div class="container">
        <!--grid-->
        <div class="row">
            <div class="col">
                <center>
                    <!--image border-radius-->
                    <img width="80%" src="gambar/webdesign.jpg" alt="Web Design" class="rounded-circle">
                    <h3>Web Design</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
                        beatae
                        molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
                        voluptas ipsa. Ut adipisci laborum consequuntur.</p>
                    <!--button-->
                    <a class="btn btn-primary" href="#">Selengkapnya</a>
                </center>
            </div>

            <div class="col">
                <center>
                    <!--image border-radius-->
                    <img width="80%" src="gambar/webprogramming.jpg" alt="Web Programming" class="rounded-circle">
                    <h3>Web Programming</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
                        beatae
                        molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
                        voluptas ipsa. Ut adipisci laborum consequuntur.</p>
                    <!--button-->
                    <a class="btn btn-primary" href="#">Selengkapnya</a>
                </center>
            </div>

            <div class="col">
                <center>
                    <!--image border-radius-->
                    <img width="80%" src="gambar/android.jpg" alt="Android Development" class="rounded-circle">
                    <h3>Android Development</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
                        beatae
                        molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
                        voluptas ipsa. Ut adipisci laborum consequuntur.</p>
                    <!--button-->
                    <a class="btn btn-primary" href="#">Selengkapnya</a>
                </center>
            </div>

        </div>

    </div>

Pada contoh script di atas, sudah mencakup Container, Grid, Image, dan Button. Script kode paling atas, kita tambahkan <br>. Supaya containernya memiliki jarak agak kebawah.

8. Maka seperti inilah pada browser.

Jika kita scroll ke bawah, seperti inilah tampilannya.

9. Lalu pada Container tadi, tepatnya di bawah Grid. Kita tambahkan script.

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

        <!--kodenya ditambahkan disini-->
    </div>

Adapun script yang dimaksud adalah seperti berikut ini.

<!--row untuk membuat media objek-->
        <br><br><br>

        <div class="row">
            <div class="col-md-7" style="padding: 80px;">
                <h2>Web Design</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
                    tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
                    quos quam fugit, repudiandae doloribus nesciunt.</p>
            </div>
            <div class="col-md-5">
                <img class="img-thumbnail" src="gambar/webdesign.jpg" alt="Web Design">
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-5">
                <img class="img-thumbnail" src="gambar/webprogramming.jpg" alt="Web Programming">
            </div>
            <div class="col-md-7" style="padding: 80px;">
                <h2>Web Programming</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
                    tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
                    quos quam fugit, repudiandae doloribus nesciunt.</p>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-7" style="padding: 80px;">
                <h2>Android Development</h2>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
                    tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
                    quos quam fugit, repudiandae doloribus nesciunt.</p>
            </div>
            <div class="col-md-5">
                <img class="img-thumbnail" src="gambar/android.jpg" alt="Android Development">
            </div>
        </div>

        <hr>

Pada script kode di atas pada bagian <div class=”col-md-7″>. Kita tambahkan atribut style=”padding:80px;”, supaya teks yang di dalamnya lebih ke dalam lagi tampilannya.

10. Maka seperti inilah tampilannya pada browser, jika kita scroll ke bawah lagi.

Gambar di atas adalah saat halamannya discroll agak ke bawah.

11. Tambahkan fitur Container baru, tepatnya paling bawah setelah Container sebelumnya. Tujuannya disini, kita akan membuat menu Footer.

<br>
    <div class="container" style="padding: 30px;">
        <p align="center">@copyright 2019 - by: Webhozz &nbsp;&nbsp;<a href="#">Back to Top</a></p>
    </div>

Seperti inilah hasilnya pada browser jika kita scroll ke bawah.

12. Maka beginilah script kodenya 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>Belajar Bootstrap</title>
    </head>

    <body>

        <!--navbar-->

        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="index.html">Webhozz Training</a>
            <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>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Product</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Blog</a>
                    </li>
                </ul>
            </div>
        </nav>

        <!--carousel-->
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="gambar/sunflower.jpg" class="d-block w-100" alt="Bunga Matahari">
                </div>
                <div class="carousel-item">
                    <img src="gambar/ship.jpg" class="d-block w-100" alt="Kapal Berlayar">
                </div>
                <div class="carousel-item">
                    <img src="gambar/lake.jpg" class="d-block w-100" alt="Danau">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

        <!--container-->
        <br>
        <div class="container">
            <!--grid-->
            <div class="row">
                <div class="col">
                    <center>
                        <!--image border-radius-->
                        <img width="80%" src="gambar/webdesign.jpg" alt="Web Design" class="rounded-circle">
                        <h3>Web Design</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
                            beatae
                            molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
                            voluptas ipsa. Ut adipisci laborum consequuntur.</p>
                        <!--button-->
                        <a class="btn btn-primary" href="#">Selengkapnya</a>
                    </center>
                </div>

                <div class="col">
                    <center>
                        <!--image border-radius-->
                        <img width="80%" src="gambar/webprogramming.jpg" alt="Web Programming" class="rounded-circle">
                        <h3>Web Programming</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
                            beatae
                            molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
                            voluptas ipsa. Ut adipisci laborum consequuntur.</p>
                        <!--button-->
                        <a class="btn btn-primary" href="#">Selengkapnya</a>
                    </center>
                </div>

                <div class="col">
                    <center>
                        <!--image border-radius-->
                        <img width="80%" src="gambar/android.jpg" alt="Android Development" class="rounded-circle">
                        <h3>Android Development</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat exercitationem, unde aliquid
                            beatae
                            molestias reiciendis maxime laudantium dolorem ratione atque quibusdam, odio quisquam molestiae
                            voluptas ipsa. Ut adipisci laborum consequuntur.</p>
                        <!--button-->
                        <a class="btn btn-primary" href="#">Selengkapnya</a>
                    </center>
                </div>

            </div>

            <!--row untuk membuat media objek-->
            <br><br><br>

            <div class="row">
                <div class="col-md-7" style="padding: 80px;">
                    <h2>Web Design</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
                        tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
                        quos quam fugit, repudiandae doloribus nesciunt.</p>
                </div>
                <div class="col-md-5">
                    <img class="img-thumbnail" src="gambar/webdesign.jpg" alt="Web Design">
                </div>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-5">
                    <img class="img-thumbnail" src="gambar/webprogramming.jpg" alt="Web Programming">
                </div>
                <div class="col-md-7" style="padding: 80px;">
                    <h2>Web Programming</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
                        tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
                        quos quam fugit, repudiandae doloribus nesciunt.</p>
                </div>
            </div>

            <hr>

            <div class="row">
                <div class="col-md-7" style="padding: 80px;">
                    <h2>Android Development</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident, perspiciatis. Mollitia veniam,
                        tenetur quisquam eveniet dolor tempore alias maxime praesentium soluta repellendus? Est distinctio
                        quos quam fugit, repudiandae doloribus nesciunt.</p>
                </div>
                <div class="col-md-5">
                    <img class="img-thumbnail" src="gambar/android.jpg" alt="Android Development">
                </div>
            </div>

            <hr>
        </div>

        <br>
        <div class="container" style="padding: 30px;">
            <p align="center">@copyright 2019 - by: Webhozz &nbsp;&nbsp;<a href="#">Back to Top</a></p>
        </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>

13. Seperti inilah hasil akhirnya.

Scroll ke bawah lagi.

Scroll ke bawah lagi.

Dan scroll ke bawah lagi.

Perhatikan bagian paling bawah, nah jadi ada footernya kan???

Jadi demikianlah, selamat mencoba dan semoga bermanfaat ya.