Kita langsung mulai coding. Disini saya sudah menyediakan 2 buah file, yang pertama adalah index.html yang isinya adalah boilerplate dari Bootstrap 5. Disini saya sudah menambahkan satu buah link menuju ke file kedua kita, yaitu style.css. Namun file style.css isinya masih kosong ya. Kalau kita lihat hasilnya di browser, maka browser menampilkan judul Hello World yang sudah menggunakan framework Bootstrap.

Pada video sebelumnya, saya sudah menunjukkan cara paling mudah dan paling sering digunakan pada waktu mengerjakan proyek, yaitu kita tinggal membuka situs getbootstrap.com. Lalu kita buka dokumentasinya di bagian Docs. Kita pilih Components, dan kita pilih Navbar. Di halaman ini sudah ada contoh beberapa jenis navigasi. Kita tinggal memilih contoh yang paling mendekati kebutuhan kita dan kita tinggal copy paste source code yang diberikan. Dan situs kita pun sudah memiliki navigasi seperti contoh.

Namun berhubung di video ini kita secara khusus mempelajari mengenai komponen navbar, maka kita akan mengetikkan sendiri seluruh source code yang diberikan ini, agar kita bisa mengerti apa maksud dari masing-masing baris kode ini. Jadi sekarang kita hapus kode sample yang diberikan oleh bootstrap. Lengkap sampai ke tag h1.

Nah, untuk membuat bagian navigasi, kita menggunakan tag nav. Fungsi dari tag nav ini sama dengan tag div, hanya saja dari nama elemennya nav menjelaskan bahwa seluruh tag yang berada di dalamnya berhubungan dengan navigasi. Software tertentu seperti crawler akan lebih memperhatikan isi tag nav, karena biasa berisikan banyak link ke halaman lain.

Kemudian, untuk menyebutkan daftar link pada navigasi, kita menggunakan tag ul. Yang kemudian di dalamnya kita menggunakan tag li untuk menyebutkan masih-masing menu di dalam navigasi. Sebagai contoh disini kita buat 2 menu terlebih dahulu ya. Jadi kita tambahkan tag li dengan konten Fitur. Kemudian kita tambahkan lagi tag li dengan konten Testimoni. Kita simpan dan refresh browser. Hasilnya masih berupa daftar biasa ya. Belum seperti bagian navigasi karena kita belum menggunakan komponen Navbar dari Bootstrap.

Cara untuk menggunakan bootstrap adalah dengan menambahkan class pada tag. Sebagai contoh, pada tag nav, kita harus menambahkan class navbar. Disini kita mesti hafal ya, nama kelasnya adalah navbar. Dan untuk menggunakan kelas navbar, sebaiknya ditaruh di tag nav. Bagaimana kalau misalkan kita lupa? Nah, kalau lupa, kita tinggal melihat kembali ke contoh source code pada dokumentasi Bootstrap. Lihat kembali ke contoh disini, bagian paling atasnya adalah tag nav yang diberikan kelas navbar.

Mungkin teman-teman yang ada bertanya nih. Properti apa saja sih yang diatur di dalam kelas navbar? Nah, untuk menjawab pertanyaan ini, kita bisa kembali ke situs getbootstrap.com. Kita pilih menu Home. Lalu disini kita bisa menemukan tombol Download. Setelah itu kita dibawa ke halaman dimana kita bisa mengunduh source code Bootstrap. Kita unduh dari bagian Compiled CSS and JS. Kemudian bisa kita unzip pada folder source code kita.

Kita kembali ke Atom, dan kita bisa buka folder Bootstrap, kemudian kita buka folder CSS, dan kita pilih file bootstrap.css. Kita bisa melakukan pencarian dengan kata kunci .navbar. Disini kita bisa melihat properti apa saja yang diatur di dalam kelas navbar. Kita bisa melihat bahwa komponen navbar dibuat menggunakan flexbox, seperti yang telah kita pelajari pada playlist sebelum ini. Pada bagian akhir navbar, kita bisa melihat ada properti untuk memberikan padding pada bagian atas dan bawah navbar. Kita kembali ke browser dan kita refresh halaman kita. Maka navigasi kita bergeser sedikit ke bawah, karena kelas navbar menggunakan padding pada bagian atas dan bawahnya.

Setelah kita mengunduh source code bootstrap ke komputer kita, maka sekarang kita memiliki pilihan apakah kita tetap menggunakan tag link menuju ke CDN, atau kita bisa mengubahnya untuk merujuk ke file bootstrap yang telah kita unduh. Ada beberapa keuntungan yang kita dapatkan apabila kita merujuk ke file lokal. Yang pertama adalah waktu yang diperlukan oleh browser untuk melakukan refresh halaman menjadi lebih cepat, karena sudah tidak perlu mencari bootstrap dari CDN. Hal ini akan sangat membantu kita apabila kita sedang menggunakan koneksi internet yang lambat, atau koneksi internet mobile yang biasanya dihitung berdasarkan jumlah bandwith yang kita gunakan.

Alasan kedua adalah agar kita tidak bergantung pada fasilitas CDN yang sifatnya gratis, karena sesuatu yang gratis seperti ini belum tentu untuk selamanya. Bisa saja suatu saat nanti CDN merubah kebijakannya dan menghapus seluruh konten gratis dari servernya. Hal ini akan menyebabkan situs kita langsung menjadi error. Atau bisa saja nantinya CDN merubah kebijakan dan meminta penggunanya untuk membayar sejumlah biaya berdasarkan jumlah penggunaan CDN.

Selanjutnya untuk tag UL, kita berikan kelas navbar-nav. Sekali lagi, apabila teman-teman ingin tau apa saja properti yang diatur di dalam kelas navbar-nav, maka kita bisa membuka kembali source code bootstrap dan kita cari dengan kata kunci .navbar-nav. Kita bisa melihat bahwa kelas navbar-nav kembali mengatur display menjadi flex. Artinya kita menggunakan flexbox di dalam flexbox. Dan kemudian flex-direction-nya adalah column, artinya navigasi disusun dari atas ke bawah. Dan properti terakhirnya list-style dengan nilai none akan menghilangkan bullet dari list. Kita refresh browser dan kita bisa lihat bullet menghilang dari navigasi kita.

Dan untuk setiap tag li di dalam navigasi, kita perlu memberikan kelas nav-item. Kita simpan dan refresh browser. Efeknya masih belum kelihatan ya.

Setiap menu di dalam navigasi ini biasanya merupakan link untuk menuju ke bagian lain dari situs kita. Oleh karena itu, pada setiap konten dalam tag li, kita tambahkan anchor tag. Misalkan pada menu Fitur, kita berikan anchor tag dengan href menuju ke #fitur, dan kita tambahkan kelas nav-link. Lalu pada menu Testimoni, kita tambahkan anchor tag dengan href menuju #testimoni dan kelas nav-link. Kita simpan dan refresh browser. Hasilnya seperti ini ya. Kita copy salah satu tag li, dan kita paste sebanyak 2 kali. Lalu kita ubah untuk menambahkan menu Harga dan Kontak. Sekarang kita sudah memiliki 4 buah menu yang bersusun ke bawah.

Bagaimana cara mengubah navigasi yang bersusun ke bawah menjadi bersusun ke samping? Caranya mudah ya. Kita tinggal ke tag nav. Kemudian kita tambahkan kelas navbar-expand. Dan sekarang navigasi kita sudah bersusun ke samping.

Selanjutnya apabila kita ingin menambahkan logo atau brand pada bagian navigasi, maka kita bisa menambahkan anchor tag dengan kelas navbar-brand. Anchor tag ini kita taruh di sebelum tag ul. Kita biarkan nilai attribute hrefnya #. Kita tambahkan kelas navbar-brand. Dan kita isikan kontennya, misalkan LarisPos. Kalau kita lihat hasilnya di browser, maka tulisan LarisPos berada di sebelah kiri menu navigasi, dan menggunakan Font yang sedikit berbeda.

Kita juga bisa mengganti logo ini dari teks menjadi gambar. Kita tinggal mengganti konten anchor tag menjadi tag img, dan mengarahkannya ke file gambar yang hendak kita gunakan. Sebagai contoh disini kita arahkan ke img/logo-laris.png. Lalu kita isikan attribute alt dengan nilai Logo LarisPos. Ingat, selalu biasakan untuk mengisi attribute alt.

Nah, sekarang kita masuk ke bagian terakhir dan yang paling sulit dari komponen Navbar. Kita ingin agar pada saat ukuran browser diperkecil, maka menu navigasi berubah menjadi hamburger icon, yang apabila diklik akan menampilkan menu yang bersusun secara vertikal. Mekanisme seperti ini dinamakan Toggler. Apabila kita lihat ke dokumentasi Bootstrap mengenai Navbar, maka kita bisa menemukan Toggler di bagian kanannya. Dan apabila kita klik, maka kita akan dibawa ke contoh source code cara menggunakan toggler.

Kita kembali ke source code kita. Pertama kita tambahkan dahulu hamburger icon di setelah logo. Caranya? Kita tambahkan tag button dengan kelas navbar-toggler. Kemudian di dalam button kita tambahkan tag span dengan kelas navbar-toggler-icon. Kita tambahkan kontennya Button Toggler. Kalau kita refresh browser, maka tidak ada perubahan apa-apa ya. Karena hamburger icon tidak akan muncul apabila navbar dalam kondisi expand. Kita hapus dahulu kelas navbar-expand dari tag nav.

Nah, sekarang menu navigasi kita berubah dari yang tadinya bersusun ke samping menjadi bersusun ke bawah. Dan perhatikan di bagian tengah sudah muncul Button Toggler. Namun kita masih belum bisa melihat hamburger icon-nya, karena kita belum menambahkan warna pada navigasi. Kita bisa menambahkan warna dengan cara menambahkan kelas navbar-light pada tag nav. Sekarang sudah muncul hamburger icon namun posisinya ditimpa oleh tulisan Button Toggler. Kita hapus konten Button Toggler dari tag span.

Sekarang kita sudah memiliki 3 komponen di dalam navbar. Yang pertama di sebelah kiri adalah logo. Yang kedua di bagian tengah adalah button toggler atau hamburger icon. Dan yang terakhir di sebelah kanan adalah empat menu navigasi. Kita ingin agar keempat menu navigasi ini tidak kelihatan di layar, dan hanya muncul pada saat kita mengklik button toggler.

Untuk menghilangkan menu navigasi, kita buat div baru dengan menggunakan 2 kelas, yaitu collapse dan navbar-collapse. Lalu kita pindahkan seluruh tag ul ke dalam div. Dan sekarang yang kelihatan di navbar kita hanya tinggal logo dan button toggler. Namun button ini masih belum bisa diklik ya, karena masih belum kita hubungkan ke menu navigasi.

Bagaimana caranya? Pertama kita tambahkan dahulu attribute ID pada tag div. Misalkan kita beri nilai menu-navigasi. Kemudian pada tag button, kita tambahkan attribute data-bs-toggle dengan nilai collapse, dan attribute data-bs-target dengan nilai #menu-navigasi. Perhatikan nilai dari data-bs-target ini harus sama dengan nilai ID pada div, ditambahkan dengan simbol hashtag. Kita simpan dan refresh browser. Sekarang pada saat button toggler diklik, maka menu navigasi akan muncul di bagian bawahnya.

Dan yang terakhir perlu kita atur adalah kapan navigasi akan expand, dan kapan navigasi akan collapse. Sebelum itu kita perlu mengetahui dahulu mengenai breakpoint pada Bootstrap. Kita buka dokumentasi Bootstrap dan kita pilih bagian Layout, Breakpoints. Disini kita bisa melihat bahwa pada Bootstrap versi 5 terdapat 6 buah breakpoint. Dimulai dari Extra Small untuk browser dengan ukuran lebih kecil dari 576 pixel, kemudian Small untuk ukuran browser lebih besar dari 576 pixel, Medium untuk ukuran browser lebih besar dari 768 pixel, dan seterusnya ada Large, Extra Large dan Extra Extra Large.

Pada Bootstrap versi 5, terdapat penambahan satu break point yaitu Extra Extra Large dengan nilai diatas 1400 pixel. Kalau misalkan kita buka kembali dokumentasi pada Bootstrap 4, dan kita lihat ke bagian Layout-nya. Disini hanya ada 5 buah break point, dengan yang paling besarnya adalah Extra Large di 1200 pixel. Kalau kita bandingkan ke Bootstrap 5, ada Extra Large di 1200 pixel dan setelah itu masih ada Extra Extra Large di ukuran 1400 pixel. Jadi ada penambahan satu break point lagi ya, yaitu Extra Extra Large.

Apa hubungan breakpoint ini dengan Navbar kita? Nah, dengan mengerti sistem breakpoint pada Bootstrap ini, maka kita bisa menentukan kapan Navbar kita akan mulai Expand. Apabila kita ingin Expand pada breakpoint Small, maka kita bisa menambahkan –sm pada akhir nama kelas navbar-expand, apabila kita ingin breakpoint Medium, kita bisa menambahkan –md, dan seterusnya. Sebagai contoh, pada tag nav saya tambahkan kelas navbar-expand-md. Artinya navbar kita akan Expand pada saat ukuran browser lebih besar dari 768 pixel.

Kita refresh browser dan saya hidupkan Developer Tools. Disini kita bisa melihat bahwa pada saat ukuran browser besar, maka navigasi dalam kondisi Expand. Kalau saya kecilkan browser, hingga ukurannya dibawah 768 pixel, maka keempat menu navigasi akan menghilang dan digantikan oleh Hamburger Icon, yang kalau kita klik akan memunculkan menu dalam posisi vertikal.

Kita bisa mengganti breakpoint dari Expand dengan cara mengganti akhir md menjadi akhiran ukuran lain. Sebagai contoh apabila kita ingin menggantinya menjadi Extra Large, maka kita ganti akhiran md menjadi xl, dan sekarang navigasi hanya expand apabila ukuran browser lebih besar atau sama dengan 1200 pixel.

Jadi kita bisa menyesuaikan kapan collapse dan kapan expand ini dengan kebutuhan dari situs yang sedang kita bangun. Biasanya apabila jumlah menu navigasinya banyak, maka kita akan menggunakan breakpoint yang lebih besar untuk expand. Untuk kasus situs yang sedang kita kerjakan, berhubung jumlah menu navigasinya hanya 4, maka breakpoint md saja sudah mencukupi.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.