Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap -Dashboard RTL Demo

Pandangan Awal ke Bootstrap Dashboard RTL

Hai, para pengembang web yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik ke dunia Bootstrap Dashboard RTL. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda melalui topik ini, bahkan jika Anda belum pernah menulis baris kode pun. Jangan khawatir; kita akan mengambil langkah-langkah perlahan-lahan, 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 arti istilah ini:

  1. Bootstrap: Kerangka kerja 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 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 kerja Bootstrap.

Memulai Dengan Bootstrap Dashboard RTL

Menyiapkan Lingkungan Kerja

Pertama-tama, mari kita siapkan lingkungan pengembangan. 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 menyarankan 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 menetapkan bahasa ke Arab dan arah teks ke right-to-left.
  • Kita menautkan file CSS Bootstrap RTL 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 Batang Navigasi

Setiap dashboard yang bagus memerlukan batang navigasi. 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 batang navigasi responsif dengan nama merek dan tiga item menu. Perhatikan bagaimana kita menggunakan teks Arab untuk mempertahankan nature RTL dashboard kita.

Menambah Widget Dashboard

Sekarang, mari kita tambahkan beberapa widget ke dashboard kita. Kita akan menciptakan tata letak 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 berukuran medium dan keatas, kartu ini akan berada di sebelah kanan dalam baris tiga.

Menyempurnakan Dashboard

Menambah 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> yang ditutup:

<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 mempertahankan tema RTL kita.

Kesimpulan

Selamat! Anda telah menciptakan dashboard Bootstrap RTL pertama Anda. Kita telah menutupi dasar-dasar membuat layout RTL, membuat batang navigasi, menambahkan kartu widget, dan bahkan menambahkan grafik. Ini hanya permulaan – ada masih banyak hal yang bisa Anda lakukan dengan Bootstrap dan dashboard!

Ingat, kunci untuk menjadi ahli pengembangan web adalah praktik. Cobalah untuk memodifikasi dashboard ini, tambahkan fitur baru, atau buat tata letak yang sama sekali baru. Kesempatan tak terbatas!

Berikut adalah tabel yang menggabungkan komponen utama yang kita gunakan:

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

Terus jelajahi, terus kode, dan yang paling penting, bersenang-senang! Selamat berkoding, para pengembang web masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Blog Bootstrap RTL