Contoh Aplikasi

Beranda
CSS

Tutorial Membuat Dashboard Rental Mobil Responsif dengan HTML, CSS, dan JavaScript

Artikel berikut membahas mengenai Tutorial Membuat Dashboard Rental Mobil Responsif dengan HTML, CSS, dan JavaScript

Rental Mobil Responsif dengan HTML, CSS, dan JavaScript

Dashboard rental mobil adalah antarmuka penting untuk mengelola dan menampilkan ketersediaan kendaraan. Dalam tutorial ini, kita akan membuat dashboard rental mobil responsif yang menarik dengan:

✅ Desain modern menggunakan CSS Flexbox & Grid
✅ Animasi halus untuk pengalaman pengguna lebih baik
✅ Fitur pencarian dan navigasi mobile-friendly
✅ Integrasi data dinamis dengan JavaScript



Struktur Project

📂 rental-mobil-dashboard/  
├── index.html    (Struktur dasar HTML)  
├── styles.css    (Styling dengan CSS)  
└── script.js     (Fungsi interaktif dengan JavaScript)

Langkah 1: Membuat Struktur HTML

File index.html berisi:

  • Header: Judul aplikasi + profil pengguna
  • Search Bar: Fitur pencarian mobil
  • Statistik: Jumlah mobil tersedia, disewa, dan booking
  • Daftar Mobil: Card informasi mobil (dinamis di-load via JavaScript)
  • Bottom Navigation: Menu mobile-friendly
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DriveNow - Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Header -->
  <header>...</header>

  <!-- Search Bar -->
  <div class="search-bar">...</div>

  <!-- Stats Cards -->
  <section class="stats">...</section>

  <!-- Daftar Mobil -->
  <section class="car-list" id="carList"></section>

  <!-- Bottom Nav -->
  <nav>...</nav>

  <script src="script.js"></script>
</body>
</html>

Langkah 2: Styling dengan CSS

File styles.css mencakup:

  • Warna Modern: Gradien biru untuk UI yang menarik
  • Responsive Design: Tampilan optimal di mobile & desktop
  • Animasi: Efek hover dan fade-in pada card mobil
:root {
  --primary: #4361ee;
  --secondary: #3f37c9;
  --light: #f8f9fa;
  --dark: #212529;
}

body {
  background: #f5f7ff;
  font-family: 'Poppins', sans-serif;
}

/* Card Mobil */
.car-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.car-card:hover {
  transform: translateY(-5px);
}

Langkah 3: Menambahkan Interaktivitas dengan JavaScript

File script.js berfungsi untuk:

  1. Load Data Mobil (JSON/API)
  2. Fitur Pencarian
  3. Navigasi antar Halaman
// Data Mobil
const cars = [
  {
    id: 1,
    name: "Toyota Avanza 2023",
    type: "MPV",
    price: "350.000"
  },
  {
    id: 2,
    name: "Honda Brio RS 2022",
    type: "City Car",
    price: "300.000"
  }
];

// Render Daftar Mobil
function loadCars() {
  const carList = document.getElementById('carList');
  cars.forEach(car => {
    carList.innerHTML += `
      <div class="car-card">
        <h3>${car.name}</h3>
        <p>Rp${car.price}/hari</p>
      </div>
    `;
  });
}

// Jalankan saat halaman dimuat
document.addEventListener('DOMContentLoaded', loadCars);

Kesimpulan

Dengan HTML, CSS, dan JavaScript, kita berhasil membuat:

  • ✅ Dashboard rental mobil modern & responsif
  • ✅ Fitur pencarian & navigasi
  • ✅ Tampilan user-friendly dengan animasi

🎯 Langkah Selanjutnya:

  • Tambahkan backend dengan Firebase/PHP
  • Integrasi payment gateway (Midtrans/OVO)

Dengan tutorial ini, Anda bisa membuat dashboard rental mobil profesional dari nol. Selamat mencoba! 🚀

Kode Lengkap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>DriveNow - Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary: #4361ee;
      --secondary: #3f37c9;
      --accent: #4cc9f0;
      --light: #f8f9fa;
      --dark: #212529;
      --success: #4bb543;
      --warning: #fca311;
      --danger: #ef233c;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      background: #f5f7ff;
      color: var(--dark);
      padding-bottom: 80px;
    }

    header {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      padding: 20px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }

    .greeting h1 {
      font-size: 1.3rem;
      font-weight: 600;
    }

    .greeting p {
      font-size: 0.8rem;
      opacity: 0.9;
      margin-top: 2px;
    }

    .profile-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--primary);
      font-weight: bold;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .search-bar {
      padding: 0 16px;
      margin-top: -10px;
      margin-bottom: 10px;
    }

    .search-container {
      background: white;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .search-container input {
      border: none;
      outline: none;
      flex: 1;
      margin-left: 10px;
      font-size: 0.9rem;
    }

    .search-container i {
      color: #888;
    }

    .stats {
      display: flex;
      justify-content: space-between;
      margin: 16px;
      gap: 12px;
    }

    .stat-card {
      background: white;
      padding: 16px;
      flex: 1;
      border-radius: 16px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;
    }

    .stat-card:hover {
      transform: translateY(-5px);
    }

    .stat-card h2 {
      color: var(--primary);
      font-size: 1.5rem;
      font-weight: 700;
    }

    .stat-card p {
      font-size: 0.8rem;
      color: #666;
      margin-top: 4px;
    }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      margin: 20px 0 10px;
    }

    .section-title h2 {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--dark);
    }

    .section-title a {
      font-size: 0.8rem;
      color: var(--primary);
      text-decoration: none;
    }

    .car-list {
      padding: 0 16px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .car-card {
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;
    }

    .car-card:hover {
      transform: translateY(-5px);
    }

    .car-image {
      position: relative;
    }

    .car-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }

    .car-type {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(0,0,0,0.6);
      color: white;
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 0.7rem;
    }

    .car-info {
      padding: 16px;
    }

    .car-info h3 {
      font-size: 1.1rem;
      margin-bottom: 6px;
      font-weight: 600;
    }

    .car-details {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .car-details span {
      display: flex;
      align-items: center;
      font-size: 0.8rem;
      color: #666;
      background: #f5f5f5;
      padding: 4px 8px;
      border-radius: 8px;
    }

    .car-details i {
      margin-right: 4px;
      font-size: 0.9rem;
    }

    .price-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .price {
      font-weight: 700;
      color: var(--primary);
      font-size: 1.1rem;
    }

    .price span {
      font-size: 0.8rem;
      font-weight: 400;
      color: #888;
    }

    .btn-sewa {
      background: linear-gradient(to right, var(--primary), var(--secondary));
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-sewa:hover {
      opacity: 0.9;
      box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
    }

    nav {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: white;
      display: flex;
      justify-content: space-around;
      padding: 12px 0;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
      z-index: 100;
    }

    .nav-item {
      text-decoration: none;
      color: #888;
      font-size: 0.7rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.3s ease;
    }

    .nav-item i {
      font-size: 1.3rem;
      margin-bottom: 4px;
    }

    .nav-item.active {
      color: var(--primary);
      transform: translateY(-5px);
    }

    .nav-item.active i {
      background: linear-gradient(to right, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Animation */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .car-card {
      animation: fadeIn 0.5s ease forwards;
    }

    .car-card:nth-child(1) { animation-delay: 0.1s; }
    .car-card:nth-child(2) { animation-delay: 0.2s; }
  </style>
</head>
<body>

  <header>
    <div class="header-content">
      <div class="greeting">
        <h1>Selamat Pagi, John</h1>
        <p>Temukan mobil impian Anda</p>
      </div>
      <div class="profile-icon">J</div>
    </div>
  </header>

  <div class="search-bar">
    <div class="search-container">
      <i>🔍</i>
      <input type="text" placeholder="Cari mobil...">
    </div>
  </div>

  <section class="stats">
    <div class="stat-card">
      <h2>12</h2>
      <p>Mobil Tersedia</p>
    </div>
    <div class="stat-card">
      <h2>5</h2>
      <p>Sedang Disewa</p>
    </div>
    <div class="stat-card">
      <h2>8</h2>
      <p>Booking</p>
    </div>
  </section>

  <div class="section-title">
    <h2>Mobil Tersedia</h2>
    <a href="#">Lihat Semua</a>
  </div>

  <section class="car-list">
    <!-- Mobil 1 -->
    <div class="car-card">
      <div class="car-image">
        <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Toyota Avanza">
        <div class="car-type">MPV</div>
      </div>
      <div class="car-info">
        <h3>Toyota Avanza 2023</h3>
        <div class="car-details">
          <span><i>⛽</i> Bensin</span>
          <span><i>👥</i> 7 Kursi</span>
          <span><i>🔄</i> Manual</span>
          <span><i>⭐</i> 4.8/5</span>
        </div>
        <div class="price-info">
          <div class="price">Rp350.000 <span>/hari</span></div>
          <button class="btn-sewa">Sewa Sekarang</button>
        </div>
      </div>
    </div>

    <!-- Mobil 2 -->
    <div class="car-card">
      <div class="car-image">
        <img src="https://images.unsplash.com/photo-1494976388531-d1058494cdd8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Honda Brio">
        <div class="car-type">City Car</div>
      </div>
      <div class="car-info">
        <h3>Honda Brio RS 2022</h3>
        <div class="car-details">
          <span><i>⛽</i> Bensin</span>
          <span><i>👥</i> 5 Kursi</span>
          <span><i>🔄</i> Automatic</span>
          <span><i>⭐</i> 4.7/5</span>
        </div>
        <div class="price-info">
          <div class="price">Rp300.000 <span>/hari</span></div>
          <button class="btn-sewa">Sewa Sekarang</button>
        </div>
      </div>
    </div>
  </section>

  <nav>
    <a href="#" class="nav-item active">
      <i>🏠</i>
      Home
    </a>
    <a href="#" class="nav-item">
      <i>🔍</i>
      Cari
    </a>
    <a href="#" class="nav-item">
      <i>📅</i>
      Pesanan
    </a>
    <a href="#" class="nav-item">
      <i>👤</i>
      Profil
    </a>
  </nav>

</body>
</html>