Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - Contoh Checkout

Overview

Halo, para pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik untuk membuat halaman checkout menggunakan Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam proses ini. Jangan khawatir jika Anda baru belajar coding - kita akan mengambil langkah demi langkah, dan pada akhirnya, Anda akan memiliki formulir checkout yang terlihat profesional dan Anda dapat banggakan!

Bootstrap-Checkout Demo

Apa Itu Bootstrap?

Sebelum kita mendalam, mari bicarakan tentang Bootstrap. Bayangkan Anda membangun sebuah rumah. Daripada membuat setiap batu dari awal, apakah tidak akan bagus jika Anda memiliki tembok dan atap yang sudah jadi? Itu apa yang Bootstrap lakukan untuk pengembangan web - sebuah koleksi komponen dan gaya yang sudah dibuat sebelumnya yang membuat proses membuat website yang cantik menjadi lebih mudah dan cepat.

Menyiapkan Proyek Kita

Langkah 1: Sertakan Bootstrap

Pertama, kita perlu menyertakan Bootstrap dalam proyek kita. Itu seperti mengemas peralatan kita sebelum memulai kerja. Tambahkan baris ini ke <head> file HTML Anda:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Baris ini mengambil gaya dan skrip Bootstrap dari internet, jadi kita tidak perlu mengunduh apa pun.

Langkah 2: Struktur HTML Dasar

Sekarang, mari kita setup struktur HTML dasar kita:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Checkout</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Form Checkout</h1>
<!-- Form kita akan ditempatkan di sini -->
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ini akan membuat halaman web dasar dengan judul dan kontainer untuk formulir kita. Kelas container adalah kelas Bootstrap yang memusatkan konten kita dan memberikan padding yang bagus.

Membuat Form Checkout

Langkah 3: Membuat Form

Sekarang, mari kita tambahkan form kita di dalam kontainer:

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Nama depan</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Nama belakang</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">Alamat</label>
<input type="text" class="form-control" id="address" placeholder="1234 Jalan Utama" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">Place Order</button>
</form>

mari kitauraikan ini:

  1. Kita menggunakan sistem grid Bootstrap dengan row dan col-md-6 untuk membuat dua kolom untuk nama depan dan nama belakang.
  2. Kelas mb-3 menambahkan margin ke bawah setiap grup form.
  3. form-label dan form-control adalah kelas Bootstrap yang menggaya label dan input kita.
  4. Kelas btn menggaya tombol submit kita.

Langkah 4: Menambahkan Informasi Pembayaran

Mari kita tambahkan bagian untuk informasi pembayaran:

<h4 class="mb-3">Pembayaran</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Kartu kredit</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Kartu debit</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">Nama di kartu</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Nomor kartu kredit</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Kadaluarsa</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Di sini, kita menambahkan tombol radio untuk metode pembayaran dan field untuk detail kartu. Kelas gy-3 menambahkan jarak vertikal antara baris.

Menyempurnakan Pengalaman Pengguna

Langkah 5: Menambahkan Feedback Validasi

Bootstrap menyediakan kelas untuk feedback validasi form. Mari kita tambahkan beberapa ke input nama depan kita:

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Nama depan</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
Terlihat bagus!
</div>
<div class="invalid-feedback">
Mohon masukkan nama depan Anda.
</div>
</div>

Untuk membuat ini bekerja, kita perlu menambahkan beberapa JavaScript:

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

Skrip ini menambahkan kelas was-validated ke form saat pengajuan, yang memicu tampilan feedback validasi.

Kesimpulan

Selamat! Anda baru saja membuat formulir checkout yang terlihat profesional menggunakan Bootstrap. Mari kita rangkum apa yang kita pelajari:

  1. Cara menyertakan Bootstrap dalam proyek kita
  2. Menggunakan sistem grid Bootstrap untuk layout
  3. Menggaya elemen form dengan kelas Bootstrap
  4. Menambahkan feedback validasi

Ingat, latihan membuat sempurna. Cobalah untuk memodifikasi formulir ini, tambahkan field baru, atau ubah gayanya. Semakin Anda mencoba, semakin Anda akan menjadi ahli!

Berikut adalah tabel kelas Bootstrap utama yang kita gunakan:

Kelas Tujuan
container Menpusatkan konten dan menambahkan padding
row Membuat grup kolom horizontal
col-md-6 Membuat kolom yang 50% lebar pada layar medium dan ke atas
form-label Menggaya label form
form-control Menggaya input form
btn Gaya tombol dasar
btn-primary Memberikan tombol warna biru
btn-lg Membuat tombol lebih besar
form-check Menggaya checkbox dan tombol radio
valid-feedback Menampilkan feedback untuk input valid
invalid-feedback Menampilkan feedback untuk input tidak valid

Selamat coding, dan ingat - setiap ahli pernah menjadi pemula. Terus latihan, dan Anda akan terkejut dengan apa yang Anda bisa buat!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Penentuan Harga Bootstrap
Tutorial Selanjutnya:
Demo Produk Bootstrap