Belajar Bootstrap 5
Membuat Daftar Harga Menggunakan Komponen Card
Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.
Kita langsung mulai dari coding video sebelumnya. Saya sudah menambahkan tag section baru dengan ID harga. Di dalamnya ada div container. Dan isinya ada judul Harga Laris Pos, dan deskripsi singkatnya. Kedua konten menggunakan kelas text-center sehingga ditampilkan di bagian tengah layar. Kita lihat hasilnya di browser.
Nah, untuk menggunakan komponen card, kita tinggal menambahkan div dengan kelas card. Dan kemudian kita bisa menambahkan konten di dalam kelas card ini. Mirip dengan HTML, konten di dalam card terdiri dari 3 bagian, yaitu header, body, dan footer. Sebagai contoh, kita tambahkan div dengan kelas card-header, kelas card-body dan kelas card-footer. Tentunya kalau belum ada konten, kita tidak bisa melihat bagaimana tampilan dari kelas-kelas ini ya. Jadi kita tambahkan konten yang sesuai dengan nama kelasnya.
Kita simpan dan lihat hasilnya di browser. Nah sekarang kita sudah memiliki sebuah card ya. Isinya terdiri dari bagian header, body dan footer. Perhatikan bagian header dan footer secara default menggunakan warna latar belakang abu-abu. Secara default, komponen card menggunakan seluruh lebar yang tersedia.
Pertama kita ganti dahulu konten dari card-header. Disini kita gunakan tag h5 dengan kelas card-title, untuk menunjukkan bahwa konten ini adalah judul dari card. Kita tambahkan konten Paket Gold. Dan ini adalah tampilannya di browser.
Dan kemudian untuk setiap baris di dalam card, kita bisa menggunakan tag p atau div, namun selalu menggunakan kelas card-text ya. Kelas card-text dan card-title ini berfungsi untuk merapikan tampilan dari konten di dalam card. Saya copy konten card ke dalam kode.
Rp. 100.000/Bulan
Untuk 1 cabang
Support via telpon dan email
Maksimal 3 perangkat
Cetak "Powered by Laris Pos" di footer nota
Perhatikan bahwa baris pertama kita menggunakan tag p, dengan konten harga Rp. 100.000 per bulan. Sementara baris lainnya menggunakan tag div. Kita simpan dan refresh browser. Dan perhatikan pada kontennya, bahwa apabila kita menggunakan tag p, maka jarak antar barisnya menjadi lebih besar.
Untuk pengaturan konten di dalam komponen card, kita bisa menggunakan Utilities. Sebagai contoh, kita ingin agar tulisan harga menjadi lebih besar, maka kita bisa menggunakan Text Utility untuk mengatur font size. Kita tambahkan kelas fs-4. Dan ukuran harga pun menjadi lebih besar.
Untuk menambah tombol di bagian akhir card, kita tinggal menambahkan anchor tag, dengan kelas btn dan btn-outline-primary. Kemudian untuk kontennya kita isikan dengan Beli Sekarang. Untuk menambah jarak antara tombol dengan tulisan sebelumnya, kita tambahkan kelas mt-4. Untuk menambah jarak di bawahnya, kita tambahkan lagi kelas mb-4. Dan kemudian kita tambahkan bootstrap icons ke dalam tombol ini dengan cara menambahkan kode .
Kita hapus bagian card-footer karena kebetulan tidak digunakan dalam rancangan situs kita. Dan kita pun sudah mendapatkan satu buah card lengkap untuk daftar harga kita. Kita tambahkan kelas mb-5 pada card untuk memberikan jarak pada bagian bawah card. Selanjutnya saya paste kode dari card kedua.
Paket Platinum
Nah, sekarang kita memiliki 2 kartu untuk daftar harga. Namun kita ingin menggunakan warna yang berbeda. Kita ingin agar kartu kedua menggunakan warna primary, sehingga kelihatan lebih menarik bagi pengunjung. Pertama kita bisa atur pada bagian tombolnya terlebih dahulu. Kita tinggal tambahkan kelas btn-primary. Dan sekarang tombol pun menggunakan warna primary.
Kemudian kita ingin agar judul dari card menggunakan warna yang sama dengan tombol ini. Pertama kita ubah warna latar belakangnya terlebih dahulu. Kita bisa menggunakan background utilities, tepatnya kelas bg-primary. Kita tambahkan di kelas card-header. Sekarang warna latar belakangnya biru, namun warna teksnya masih hitam. Untuk mengubah warna teks, kita tambahkan lagi kelas text-light. Dan sekarang kita sudah memiliki kedua card untuk daftar harga.
Selanjutnya kita ingin mengatur agar kedua kartu berada bersampingan ya. Jangan seperti sekarang yang menggunakan seluruh lebar browser. Bagaimana caranya? Cara paling gampangnya, kita bisa membuat div baru menggunakan kelas card-group. Dan memindahkan kedua card ini ke dalamnya. Nah, agar lebih mudah untuk melihatnya, seluruh kode card ini saya tutup ya. Jadi kita hanya melihat satu baris pertamanya saja yaitu div card.
Kelas card-group akan membagi lebar layar sebanyak jumlah card di dalamnya, sehingga masing-masing card mendapatkan lebar yang sama. Ini adalah cara yang paling gampang untuk membagi layar menjadi beberapa card. Namun kekurangannya adalah cara ini tidak responsive. Jadi sebesar apa pun ukuran browser kita, maka lebarnya tetap dibagi dua. Kecuali untuk ukuran paling kecilnya.
Solusi lainnya adalah menggunakan Bootstrap Grid System, yang telah kita pelajari pada video sebelumnya. Caranya? Pertama kita tambahkan dahulu kelas row. Lalu di dalamnya kita tambahkan kelas col. Sebagai contoh, misalkan pada ukuran medium kita hendak menggunakan lebar 5 unit, maka kita gunakan kelas col-md-5. Lalu pada ukuran extra large kita hendak menggunakan lebar 3 unit, maka kita tambahkan lagi kelas col-xl-3. Berhubung kita memiliki 2 buah card, maka kita copy paste div col ini satu kali.
Kita tutup kembali kelas card, agar kita bisa dengan mudah mengcopynya ke dalam div col. Kita copy card pertama ke dalam div col pertama. Lalu kita copy lagi card kedua ke dalam div col kedua.
Sekarang card kita sudah responsive sesuai dengan yang kita atur. Namun masih ada satu kekurangan ya. Posisi dari card selalu berada di bagian kiri browser. Hal ini bisa kita akali dengan menggunakan flex utility. Kita tambahkan kelas justify-content-evenly setelah kelas row. Dan sekarang kedua card berada di bagian tengah layar.
Kita tinggal merapikan saja kedua card kita. Untuk menambahkan jarak antara card dengan judul, kita bisa tambahkan kelas mt-5 di bagian row. Dan kemudian agar tulisan di dalam card kita berada di bagian tengah card, kita bisa menambahkan kelas text-center setelah kelas card-body. Nah, sekarang Paket Gold sudah rata tengah, namun Paket Platinum masih rata kiri ya. Kita card kelas card-body yang kedua, dan kita tambahkan juga kelas text-center. Dan sekarang keduanya sudah rata tengah.
Selanjutnya, setelah tag penutup row, kita tambahkan konten baru yaitu tabel Perbandingan Paket. Untuk mempersingkat waktu, saya langsung paste saja kodenya.
Perbandingan Paket
Gold
Platinum
Jumlah Cabang
1
1
Jumlah Maksimal Perangkat
3
5
Support Via Telpon & Email
Training Gratis di Kantor Laris Pos
Promo Member Get Member
Cetak "Powered by Laris Pos" di footer nota
Dan ini adalah tampilan dari tabel Perbandingan Paket. Kita lihat lagi ke kodenya. Yang menariknya disini adalah di dalam kode ini saya membuat grid di dalam grid. Jadi kalau kita lihat setelah judul Perbandingan Paket, pertama ada row, dan kemudian di dalamnya ada row lagi. Artinya grid di dalam grid ya. Mengapa kita menggunakan kode seperti ini? Karena secara default satu buah row akan menggunakan seluruh lebar browser. Jadi kalau misalkan saya hapus grid yang pertama, maka tabel ini menggunakan seluruh lebar browser, sehingga tampilannya justru menjadi lebih susah untuk dibaca.
Jadi tujuan grid yang pertama adalah untuk mengatur lebar tabel, dimana pada ukuran medium kita hanya menggunakan 10 dari 12 space yang tersedia. Sedangkan pada ukuran extra large ke atas, kita menggunakan 8 dari 12 space yang tersedia. Dan kemudian dengan menambahkan kelas justify-content-center, maka tabel ini berada di bagian tengah layar.
Kelebihan dari cara ini adalah mempermudah kita dalam pengaturan lebar tabel secara responsive. Bisa kita lihat pada kode, bahwa semua kolom di dalam grid anak menggunakan ukuran 8-2-2, jadi totalnya 12. Dan kita bisa mengubah ukuran tabel, cukup dengan mengubah ukuran col pada grid induknya saja. Sebagai contoh, saya ubah ukuran xl-nya dari 8 menjadi 4. Jadi cukup mengubah satu kode ini saja, maka ukuran tabel secara keseluruhan ikut berubah. Kita kembalikan dulu ukuran xl menjadi 8.
Selanjutnya kita akan mempelajari cara melakukan kostumisasi warna terhadap tabel perbandingan paket. Perhatikan pada row anak, kita telah menambahkan satu kelas kostum dengan nama paket-row. Kelas inilah yang akan kita gunakan untuk melakukan kostumisasi warna.
Kita buka kode css. Dan kita tambahkan selector kelas paket-row. Berhubung kita ingin agar warna latar belakangnya selang seling antara putih polos dan biru muda, maka kita bisa tambahkan pseudo-class :nth-of-type(even). Artinya kita hanya memilih kelas .paket-row dengan nomor urut genap saja. Kita isikan dengan properti background-color: #EEFFFF;
Selanjutnya kita ingin agar pada saat mouse diarahkan ke atas baris, maka warna baris tersebut berubah menjadi highlight biru. Kita bisa tambahkan lagi selector kelas paket-row. Kali ini kita gunakan pseudo-class :hover. Kita isikan dengan properti background-color: #88FFF7;
Dan bagian Daftar Harga kita pun sudah selesai.
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.