Bootstrap - Dashboard Demo
Sapa, para pemaju yang berbakat! Hari ini, kita akan memulakan sebuah perjalanan yang menarik ke dunia Bootstrap dan mencipta demonstrasi dashboard yang memukau. Seperti guru sains komputer di lingkungan jiran anda, saya begitu gembira untuk memandu anda melalui proses ini, walaupun anda belum pernah menulis baris kode sebelum ini. Jadi, siapkan diri dan mari kita masuk ke dalam!
Apa Itu Bootstrap?
Sebelum kita mula membina dashboard kami, mari kitaambil sedikit masa untuk memahami apa itu Bootstrap. Bayangkan anda cuba membina sebuah rumah. Bootstrap adalah seperti set prapabrik yang datang dengan dinding, pintu, dan tingkap yang sudah direka. Ia adalah kerangka hadapan yang kuat yang menyediakan komponen dan gaya prabina, menjadikan ia lebih mudah untuk mencipta laman web responsif dan visually appealing.
Menyiapkan Projek Kami
Langkah 1: Sertakan Bootstrap
Pertama-tama, kita perlu menyertakan Bootstrap ke dalam projek kami. Kita akan melakukan ini dengan menambahkan baris berikut ke dalam seksyen <head> fail HTML kami:
<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 adalah seperti menjemput Bootstrap ke pesta pengkomputeran kami. Mereka membawa semua gaya dan ciri interaktif yang kita perlukan.
Langkah 2: Struktur HTML Asas
Sekarang, mari kita menetapkan struktur asas dashboard kami:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Saya yang Menakjubkan</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<!-- Kandungan dashboard kita akan diletakkan di sini -->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ini adalah seperti membina dasar rumah kami. Kelas container-fluid memastikan kandungan kita meliputi keseluruhan lebar skrin.
Membina Dashboard
Langkah 3: Mencipta Baris Panduan
Mari kita mula dengan menambah baris panduan ke dashboard kita:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dashboard Saya</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tetapan</a>
</li>
</ul>
</div>
</div>
</nav>Kod ini mencipta baris panduan yang responsif. Ia seperti plak di dashboard kita, membantu pengguna mengnavigasi melalui seksyen yang berbeza.
Langkah 4: Menambah Sidebar
Berikutnya, mari kita tambah sidebar untuk opsyen navigasi tambahan:
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pesanan
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Produk
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pelanggan
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- Kandungan utama akan diletakkan di sini -->
</main>
</div>Sidebar ini adalah seperti menu di restoran, menyediakan akses pantas ke seksyen yang berbeza di dashboard kita.
Langkah 5: Mencipta Widget Dashboard
Sekarang, mari kita tambah beberapa widget ke kawasan kandungan utama:
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Jumlah Penjualan</h5>
<p class="card-text display-4">$15,000</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Pelanggan Baru</h5>
<p class="card-text display-4">250</p</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Pesanan Tertunggu</h5>
<p class="card-text display-4">18</p>
</div>
</div>
</div>
</div>
</main>Widget ini adalah seperti bilik di rumah dashboard kita, setiap satunya menyediakan tujuan khusus dan menunjukkan maklumat penting.
Menambahbaik Dashboard
Langkah 6: Menambah Carta
Mari kita tambah carta untuk menjadikan dashboard kita lebih dinamik. Kita akan menggunakan Chart.js, sebuah pustaka carta yang popular:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div class="row mt-4">
<div class="col-md-8">
<canvas id="salesChart"></canvas>
</div>
</div>
<script>
var ctx = document.getElementById('salesChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [{
label: 'Penjualan',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>Carta ini adalah seperti tingkap di rumah dashboard kita, memberikan pandangan ke tren penjualan sepanjang masa.
Langkah 7: Menambah Tabel
Akhirnya, mari kita tambah tabel untuk menunjukkan data yang terperinci:
<div class="row mt-4">
<div class="col-md-12">
<h3>Pesanan Baru</h3>
<table class="table table-striped">
<thead>
<tr>
<th>ID Pesanan</th>
<th>Pelanggan</th>
<th>Produk</th>
<th>Jumlah</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>John Doe</td>
<td>Widget A</td>
<td>$100</td>
<td><span class="badge bg-success">Selesai</span></td>
</tr>
<tr>
<td>002</td>
<td>Jane Smith</td>
<td>Widget B</td>
<td>$75</td>
<td><span class="badge bg-warning">Tertunggu</span></td>
</tr>
<!-- Tambah lebih banyak baris jika perlu -->
</tbody>
</table>
</div>
</div>Tabel ini adalah seperti lemari rak di dashboard kita, mengatur dan menunjukkan data penting.
Kesimpulan
Tahniah! Anda telah membina sebuah dashboard Bootstrap yang cantik. Ingat, seperti mana-mana kemahiran, pengembangan web meningkat dengan latihan. Jangan disangsahkan jika sesuatu tidak berjalan sepenuhnya pertama kali - bahkan pengembang berpengalaman menghabiskan masa untuk membaiki dan meningkatkan kod mereka.
Berikut adalah jadual rujukan yang cepat bagi kelas Bootstrap yang kami gunakan:
| Kelas | Tujuan |
|---|---|
| container-fluid | Mencipta wadah yang memenuhi keseluruhan lebar skrin |
| navbar | Mencipta baris panduan |
| row | Mencipta kumpulan kolom horisontal |
| col-md-* | Mencipta kolom responsif |
| card | Mencipta wadah kandungan yang fleksibel |
| table | Menggayakan tabel HTML |
| badge | Mencipta komponen kiraan dan label kecil |
Teruskan dengan penemuan, teruskan mengkod, dan terutamanya, bersenang-senang! Perjalanan anda dalam pengembangan web baru sahaja bermula, dan terdapat banyak kemungkinan menarik di hadapan anda.
Credits: Image by storyset