Teknologi
• 8 min baca • 15 x dilihat

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

m

Ditulis oleh

mrjj

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

Code Snippet 
📂 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
Code Snippet 
<!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
Code Snippet 
: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
Code Snippet 
// 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

Code Snippet 
<!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>
Bagikan artikel ini:
← Artikel Sebelumnya
Artikel Selanjutnya →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *