Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - Dashboard RTL Demo

Pengenalan ke Bootstrap Dashboard RTL

Halo, para pengembang web yang berbakat! Hari ini, kita akan memulai perjalanan menarik ke dunia Bootstrap Dashboard RTL. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk menghidahkan Anda tentang topik ini, bahkan jika Anda belum pernah menulis satu baris kode pun sebelumnya. Jangan khawatir; kita akan berjalan langkah demi langkah, dan sebelum Anda tahu, Anda akan menciptakan dashboard yang indah dan responsif!

Bootstrap-Dashboard RTL Demo

Apa itu Bootstrap Dashboard RTL?

Sebelum kita mendalam, mari kitauraikan apa maksud istilah ini:

  1. Bootstrap: Kerangka front-end yang populer yang membuat pengembangan web lebih cepat dan mudah.
  2. Dashboard: Antarmuka pengguna yang menampilkan informasi penting pada pandangan pertama.
  3. RTL: Singkatan dari "Right-to-Left", yang adalah arah teks yang digunakan dalam bahasa seperti Arab dan Ibrani.

Menyatukan semuanya, Bootstrap Dashboard RTL adalah template yang terdesain sebelumnya untuk menciptakan dashboard yang mendukung bahasa right-to-left menggunakan kerangka Bootstrap.

Memulai dengan Bootstrap Dashboard RTL

Menyiapkan Lingkungan Kerja

Pertama-tama, mari kita siapkan lingkungan pengembangan kita. Jangan khawatir; itu lebih mudah daripada yang Anda pikirkan!

  1. Buat folder baru di komputer Anda untuk proyek Anda.
  2. Dalam folder ini, buat file HTML bernama index.html.
  3. Buka file ini di editor teks favorit Anda (saya merekomendasikan Visual Studio Code bagi pemula).

Sekarang, mari kita tambahkan struktur HTML dasar:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard RTL Saya</title>
<!-- Bootstrap RTL CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
</head>
<body>
<h1>مرحبا بالعالم!</h1>

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

mari kitauraikan ini:

  • <html lang="ar" dir="rtl">: Ini mengatur bahasa ke Arab dan arah teks ke right-to-left.
  • Kita menautkan file Bootstrap RTL CSS di bagian <head>.
  • Kita menambahkan "Hello World" dalam Arab (مرحبا بالعالم!) untuk menguji pengaturan RTL kita.
  • Di bagian bawah, kita menyertakan bundel JavaScript Bootstrap.

Membangun Struktur Dashboard

Sekarang kita memiliki pengaturan dasar, mari kita mulai membangun dashboard kita!

Membuat Navigation Bar

Setiap dashboard yang bagus memerlukan sebuah navigation bar. Mari kita tambahkan satu:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">لوحة التحكم</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<a class="nav-link active" aria-current="page" href="#">الرئيسية</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">التقارير</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">الإعدادات</a>
</li>
</ul>
</div>
</div>
</nav>

Kode ini menciptakan navigation bar yang responsif dengan nama merek dan tiga item menu. Perhatikan bagaimana kita menggunakan teks Arab untuk menjaga nature RTL dashboard kita.

Menambahkan Widget Dashboard

Sekarang, mari kita tambahkan beberapa widget ke dashboard kita. Kita akan menciptakan layout sederhana dengan dua baris kartu:

<div class="container mt-4">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">المبيعات</h5>
<p class="card-text">إجمالي المبيعات: 10,000 دولار</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">الزوار</h5>
<p class="card-text">عدد الزوار اليوم: 1,234</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">الطلبات</h5>
<p class="card-text">الطلبات الجديدة: 56</p>
</div>
</div>
</div>
</div>
</div>

Kode ini menciptakan tiga kartu widget yang menampilkan informasi penjualan, pengunjung, dan pesanan. Kelas col-md-4 memastikan bahwa di layar ukuran medium dan keatas, kartu ini akan berada di sebelah kanan dalam baris tiga.

Menengah Dashboard

Menambahkan Grafik

Tidak ada dashboard yang lengkap tanpa grafik! Mari kita tambahkan grafik batang sederhana menggunakan Chart.js:

Pertama, tambahkan pustaka Chart.js ke file HTML Anda, tepat sebelum tag </body> penutup:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Sekarang, mari kita tambahkan kanvas untuk grafik kita dan JavaScript untuk menciptakannya:

<div class="container mt-4">
<div class="row">
<div class="col-md-8 offset-md-2">
<canvas id="myChart"></canvas>
</div>
</div>
</div>

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو'],
datasets: [{
label: 'المبيعات الشهرية',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>

Kode ini menciptakan grafik batang yang menunjukkan data penjualan bulanan. Label dalam bahasa Arab untuk menjaga tema RTL kita.

Kesimpulan

Selamat! Anda telah menciptakan dashboard Bootstrap RTL pertama Anda. Kita telah menutupi dasar pengaturan tata letak RTL, membuat navigation bar, menambahkan kartu widget, dan bahkan menambahkan grafik. Ini hanya permulaan – ada banyak hal lain yang Anda bisa lakukan dengan Bootstrap dan dashboard!

Ingat, kunci untuk menjadi ahli pengembangan web adalah latihan. Cobalah untuk memodifikasi dashboard ini, menambahkan fitur baru, atau menciptakan layout yang entirely baru. Kesempatan adalah tak terbatas!

Berikut adalah tabel yang menggabungkan komponen utama yang kita gunakan:

Komponen Tujuan
Navbar Navigasi dan merek
Kartu Menampilkan informasi penting
Grafik Visualisasi data
Grid Bootstrap Struktur tata letak
RTL CSS Arah teks right-to-left

Terus jelajahi, terus kodifikasi, dan terutama, bersenang-senang! Selamat kodifikasi, para pengembang web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Blog Bootstrap RTL