Tutorial Membuat UI WhatsApp dengan HTML, CSS, dan JavaScript

Ingin membuat aplikasi chat keren seperti WhatsApp? Dalam tutorial ini, kita akan membangun antarmuka pengguna (UI) WhatsApp sederhana menggunakan HTML, CSS, dan JavaScript, lengkap dengan foto profil pengguna palsu yang realistis dari API RandomUser.me. Cocok untuk pemula yang ingin belajar pengembangan web front-end, artikel ini akan memandu kamu langkah demi langkah untuk membuat aplikasi chat sederhana yang interaktif. Yuk, mulai coding bersama KonsepKoding.com!

Mengapa Membuat UI WhatsApp?

WhatsApp adalah aplikasi chat populer dengan desain yang intuitif dan ramah pengguna. Dengan membuat UI serupa, kamu akan belajar:

Desain Responsif: Menggunakan Tailwind CSS untuk tata letak yang menyesuaikan berbagai perangkat.
Manipulasi DOM: Mengelola daftar chat dan pesan secara dinamis dengan JavaScript.
Integrasi API: Mengambil gambar profil realistis dari RandomUser.me.
Interaktivitas: Menangani klik dan input pengguna untuk pengalaman seperti WhatsApp asli.

Kata kunci seperti membuat UI WhatsApp, tutorial HTML CSS JavaScript, dan aplikasi chat sederhana akan membantu kamu memahami konsep ini dan meningkatkan skill coding untuk proyek web.

Apa yang Akan Kita Buat?

UI WhatsApp kita akan memiliki fitur berikut:

Daftar Chat: Menampilkan nama kontak, pesan terakhir, waktu, dan foto profil.
Jendela Chat: Menampilkan pesan masuk (putih) dan keluar (hijau) dengan gaya gelembung chat.
Input Pesan: Kolom untuk mengetik dan mengirim pesan dengan tombol atau tombol Enter.
Foto Profil Realistis: Diambil dari API RandomUser.me untuk tampilan autentik.

UI ini bersifat statis (tanpa backend), tapi ideal untuk belajar dasar-dasar pengembangan web.

Prasyarat

Sebelum mulai, siapkan:

Editor Kode: Visual Studio Code (VS Code) atau sejenisnya.
Koneksi Internet: Untuk mengambil Tailwind CSS dan gambar dari RandomUser.me.
Browser Modern: Chrome, Firefox, atau Edge untuk testing.

Kode Lengkap

Berikut adalah kode lengkap dalam satu file HTML. Salin ke file bernama index.html untuk mencoba sendiri:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UI WhatsApp dengan HTML, CSS, dan JavaScript</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    .chat-bubble {
      max-width: 70%;
      margin: 5px 10px;
      padding: 10px 15px;
      border-radius: 10px;
      clear: both;
    }
    .chat-bubble.sent {
      background-color: #DCF8C6;
      float: right;
    }
    .chat-bubble.received {
      background-color: #FFFFFF;
      float: left;
    }
    .chat-time {
      font-size: 0.75rem;
      color: #666;
      margin-top: 5px;
    }
    .chat-list-item:hover {
      background-color: #F0F0F0;
      cursor: pointer;
    }
    .chat-list-item.active {
      background-color: #E6F0FA;
    }
  </style>
</head>
<body class="bg-gray-100 font-sans">
  <div class="flex h-screen">
    <!-- Sidebar: Daftar Chat -->
    <div class="w-1/3 bg-white border-r border-gray-200 overflow-y-auto">
      <div class="p-4 bg-green-500 text-white flex justify-between items-center">
        <h1 class="text-xl font-semibold">WhatsApp</h1>
        <div class="space-x-2">
          <button class="p-2 rounded-full hover:bg-green-600">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13h-3v3h-2v-3H7v-2h3v-3h2v3h3v2zm-5-6h-2v2H8v2h2v2h2v-2h2v-2h-2V9z"/>
            </svg>
          </button>
        </div>
      </div>
      <div id="chat-list" class="divide-y divide-gray-200"></div>
    </div>

    <!-- Jendela Chat -->
    <div class="flex-1 flex flex-col">
      <div class="p-4 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
        <div class="flex items-center">
          <img id="chat-avatar" src="https://via.placeholder.com/40" class="w-10 h-10 rounded-full mr-3" alt="User">
          <div>
            <h2 id="chat-title" class="font-semibold">Pilih chat</h2>
            <p id="chat-status" class="text-sm text-gray-500">Online</p>
          </div>
        </div>
        <div class="space-x-2">
          <button class="p-2 rounded-full hover:bg-gray-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
            </svg>
          </button>
          <button class="p-2 rounded-full hover:bg-gray-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
            </svg>
          </button>
        </div>
      </div>
      <div id="chat-messages" class="flex-1 p-4 overflow-y-auto bg-[url('https://via.placeholder.com/1500x1500?text=WhatsApp+Background')] bg-repeat"></div>
      <div class="p-4 bg-gray-50 border-t border-gray-200 flex items-center">
        <input id="message-input" type="text" placeholder="Ketik pesan" class="flex-1 p-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-green-500">
        <button id="send-message" class="ml-2 p-2 bg-green-500 text-white rounded-full hover:bg-green-600">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <script>
    // Data chat contoh
    const chats = [
      { id: 1, name: "John Doe", lastMessage: "Hey, apa kabar?", time: "10:30", avatar: "" },
      { id: 2, name: "Jane Smith", lastMessage: "Sampai jumpa!", time: "09:15", avatar: "" },
      { id: 3, name: "Group Chat", lastMessage: "Rapat jam 6 sore", time: "Kemarin", avatar: "" }
    ];

    const messages = {
      1: [
        { text: "Hey, apa kabar?", time: "10:30", sent: true },
        { text: "Baik, kamu?", time: "10:32", sent: false }
      ],
      2: [
        { text: "Sampai jumpa!", time: "09:15", sent: true },
        { text: "Bye!", time: "09:16", sent: false }
      ],
      3: [
        { text: "Rapat jam 6 sore", time: "Kemarin", sent: false },
        { text: "Oke, aku datang", time: "Kemarin", sent: true }
      ]
    };

    // Fungsi untuk mengambil gambar pengguna acak
    async function fetchRandomImage() {
      try {
        const response = await fetch('https://randomuser.me/api/');
        const data = await response.json();
        return data.results[0].picture.large;
      } catch (error) {
        console.error('Gagal mengambil gambar:', error);
        return 'https://via.placeholder.com/40';
      }
    }

    // Menetapkan gambar ke setiap chat
    async function assignImagesToChats() {
      for (let chat of chats) {
        chat.avatar = await fetchRandomImage();
      }
      populateChatList();
    }

    // Mengisi daftar chat
    function populateChatList() {
      const chatList = document.getElementById('chat-list');
      chatList.innerHTML = '';
      chats.forEach(chat => {
        const chatItem = document.createElement('div');
        chatItem.className = 'chat-list-item p-4 flex items-center';
        chatItem.dataset.chatId = chat.id;
        chatItem.innerHTML = `
          <img src="${chat.avatar}" class="w-12 h-12 rounded-full mr-3" alt="${chat.name}">
          <div class="flex-1">
            <div class="flex justify-between">
              <h3 class="font-semibold">${chat.name}</h3>
              <span class="text-sm text-gray-500">${chat.time}</span>
            </div>
            <p class="text-sm text-gray-600 truncate">${chat.lastMessage}</p>
          </div>
        `;
        chatList.appendChild(chatItem);
        chatItem.addEventListener('click', () => loadChat(chat.id, chat.name, chat.avatar));
      });
    }

    // Memuat pesan chat
    function loadChat(chatId, name, avatar) {
      document.getElementById('chat-title').textContent = name;
      document.getElementById('chat-avatar').src = avatar;
      const chatMessages = document.getElementById('chat-messages');
      chatMessages.innerHTML = '';
      (messages[chatId] || []).forEach(msg => {
        const messageDiv = document.createElement('div');
        messageDiv.className = `chat-bubble ${msg.sent ? 'sent' : 'received'}`;
        messageDiv.innerHTML = `
          <p>${msg.text}</p>
          <div class="chat-time text-right">${msg.time}</div>
        `;
        chatMessages.appendChild(messageDiv);
      });
      chatMessages.scrollTop = chatMessages.scrollHeight;

      // Menyorot chat aktif
      document.querySelectorAll('.chat-list-item').forEach(item => item.classList.remove('active'));
      document.querySelector(`[data-chat-id="${chatId}"]`).classList.add('active');
    }

    // Mengirim pesan
    document.getElementById('send-message').addEventListener('click', () => {
      const input = document.getElementById('message-input');
      const text = input.value.trim();
      if (text) {
        const activeChat = document.querySelector('.chat-list-item.active');
        if (activeChat) {
          const chatId = activeChat.dataset.chatId;
          const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
          if (!messages[chatId]) messages[chatId] = [];
          messages[chatId].push({ text, time, sent: true });
          loadChat(chatId, document.getElementById('chat-title').textContent, document.getElementById('chat-avatar').src);
          input.value = '';
        }
      }
    });

    // Mengirim pesan dengan tombol Enter
    document.getElementById('message-input').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') document.getElementById('send-message').click();
    });

    // Inisialisasi daftar chat dengan gambar
    assignImagesToChats().then(() => {
      if (chats.length > 0) loadChat(chats[0].id, chats[0].name, chats[0].avatar);
    });
  </script>
</body>
</html>


Tutorial Membuat UI WhatsApp dengan HTML, CSS, dan JavaScript

Tutorial: Cara Membuat UI WhatsApp

Langkah 1: Struktur HTML

Kode HTML membagi UI menjadi dua bagian utama:

Sidebar: Menampilkan daftar chat dengan nama, pesan terakhir, dan foto profil.
Jendela Chat: Berisi header (dengan nama dan avatar), area pesan, dan kolom input.

Penjelasan Kode:

Menggunakan flex h-screen untuk tata letak penuh layar.
Sidebar memiliki lebar w-1/3, sedangkan jendela chat menggunakan flex-1 untuk mengisi sisa ruang.
Tailwind CSS diambil via CDN untuk styling cepat dan responsif.
Elemen seperti <div id="chat-list"> dan <div id="chat-messages"> akan diisi secara dinamis oleh JavaScript.

Langkah 2: Styling dengan CSS

CSS khusus ditambahkan untuk membuat tampilan mirip WhatsApp:

.chat-bubble {
  max-width: 70%;
  margin: 5px 10px;
  padding: 10px 15px;
  border-radius: 10px;
  clear: both;
}
.chat-bubble.sent {
  background-color: #DCF8C6;
  float: right;
}
.chat-bubble.received {
  background-color: #FFFFFF;
  float: left;
}
.chat-time {
  font-size: 0.75rem;
  color: #666;
  margin-top: 5px;
}
.chat-list-item:hover {
  background-color: #F0F0F0;
  cursor: pointer;
}
.chat-list-item.active {
  background-color: #E6F0FA;
}

Penjelasan:

Gelembung Chat: Pesan keluar berwarna hijau muda (#DCF8C6) dan mengambang ke kanan, sedangkan pesan masuk berwarna putih dan mengambang ke kiri.
Efek Interaktif: Item daftar chat berubah warna saat dihover (#F0F0F0) dan disorot (#E6F0FA) saat aktif.
Responsif: Tailwind CSS memastikan UI terlihat baik di desktop dan mobile.

Langkah 3: Logika JavaScript

JavaScript menangani semua interaktivitas, termasuk mengambil gambar dari API dan mengelola chat.

Data Contoh

Kita menggunakan data statis untuk simulasi chat:

const chats = [
  { id: 1, name: "John Doe", lastMessage: "Hey, apa kabar?", time: "10:30", avatar: "" },
  { id: 2, name: "Jane Smith", lastMessage: "Sampai jumpa!", time: "09:15", avatar: "" },
  { id: 3, name: "Group Chat", lastMessage: "Rapat jam 6 sore", time: "Kemarin", avatar: "" }
];

const messages = {
  1: [
    { text: "Hey, apa kabar?", time: "10:30", sent: true },
    { text: "Baik, kamu?", time: "10:32", sent: false }
  ],
  // Data lainnya...
};

Mengambil Gambar Profil

Kita menggunakan API RandomUser.me untuk foto profil realistis:

async function fetchRandomImage() {
  try {
    const response = await fetch('https://randomuser.me/api/');
    const data = await response.json();
    return data.results[0].picture.large;
  } catch (error) {
    console.error('Gagal mengambil gambar:', error);
    return 'https://via.placeholder.com/40';
  }
}

Penjelasan: API mengembalikan URL gambar berkualitas tinggi. Jika gagal, kita gunakan placeholder sebagai cadangan.

Mengisi Daftar Chat

Fungsi ini membuat daftar chat secara dinamis:

async function assignImagesToChats() {
  for (let chat of chats) {
    chat.avatar = await fetchRandomImage();
  }
  populateChatList();
}

function populateChatList() {
  const chatList = document.getElementById('chat-list');
  chatList.innerHTML = '';
  chats.forEach(chat => {
    const chatItem = document.createElement('div');
    chatItem.className = 'chat-list-item p-4 flex items-center';
    chatItem.dataset.chatId = chat.id;
    chatItem.innerHTML = `
      <img src="${chat.avatar}" class="w-12 h-12 rounded-full mr-3" alt="${chat.name}">
      <div class="flex-1">
        <div class="flex justify-between">
          <h3 class="font-semibold">${chat.name}</h3>
          <span class="text-sm text-gray-500">${chat.time}</span>
        </div>
        <p class="text-sm text-gray-600 truncate">${chat.lastMessage}</p>
      </div>
    `;
    chatList.appendChild(chatItem);
    chatItem.addEventListener('click', () => loadChat(chat.id, chat.name, chat.avatar));
  });
}

Memuat dan Mengirim Pesan

Fungsi loadChat menampilkan pesan saat chat dipilih, dan event listener menangani pengiriman pesan:

function loadChat(chatId, name, avatar) {
  document.getElementById('chat-title').textContent = name;
  document.getElementById('chat-avatar').src = avatar;
  const chatMessages = document.getElementById('chat-messages');
  chatMessages.innerHTML = '';
  (messages[chatId] || []).forEach(msg => {
    const messageDiv = document.createElement('div');
    messageDiv.className = `chat-bubble ${msg.sent ? 'sent' : 'received'}`;
    messageDiv.innerHTML = `
      <p>${msg.text}</p>
      <div class="chat-time text-right">${msg.time}</div>
    `;
    chatMessages.appendChild(messageDiv);
  });
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

Langkah 4: Cara Menguji

Simpan Kode: Salin kode di atas ke file index.html.
Buka di Browser: Buka file di Chrome atau Firefox dengan koneksi internet aktif.
Interaksi:
- Klik chat di sidebar untuk melihat pesan.
- Ketik pesan di kolom input dan tekan tombol kirim atau Enter.
- Perhatikan foto profil unik dari RandomUser.me untuk setiap kontak.

Troubleshooting:

Gambar Tidak Muncul: Buka konsol browser (F12 > Console) untuk memeriksa error. Pastikan koneksi internet aktif.
CORS Issue: Jika membuka file langsung, gunakan server lokal seperti npx serve untuk menghindari masalah CORS.

Tips Pengembangan Lanjutan

Tambah Backend: Gunakan Node.js atau Firebase untuk chat real-time.
Kustomisasi: Tambahkan tema gelap atau animasi untuk pengalaman lebih menarik.
API Tambahan: Gunakan RandomUser.me untuk nama pengguna acak juga.

Kesimpulan

Selamat! Kamu telah belajar cara membuat UI WhatsApp menggunakan HTML, CSS, dan JavaScript, dengan foto profil realistis dari RandomUser.me. Proyek ini adalah langkah awal untuk menguasai pengembangan front-end dan integrasi API. Gunakan kode ini untuk membangun portofolio atau kembangkan lebih lanjut dengan fitur seperti notifikasi atau grup chat.

Ingin belajar lebih banyak? Cek tutorial lain di KonsepKoding.com untuk proyek seperti game web, dashboard, atau aplikasi mobile dengan React Native. Bagikan hasil codingmu di kolom komentar atau media sosial dengan tagar #KonsepKoding!

Tutorial Membuat UI WhatsApp dengan HTML, CSS, dan JavaScript

Mengapa Membuat UI WhatsApp?

Apa yang Akan Kita Buat?

Prasyarat

Kode Lengkap

Tutorial: Cara Membuat UI WhatsApp

Langkah 1: Struktur HTML

Langkah 2: Styling dengan CSS

Langkah 3: Logika JavaScript

Data Contoh

Mengambil Gambar Profil

Mengisi Daftar Chat

Memuat dan Mengirim Pesan

Langkah 4: Cara Menguji

Tips Pengembangan Lanjutan

Kesimpulan

Post a Comment

0 Comments

Pencarian Situs

Ads

Kategori KonsepKoding

Tutorial Membuat UI WhatsApp dengan HTML, CSS, dan JavaScript

Mengapa Membuat UI WhatsApp?

Apa yang Akan Kita Buat?

Prasyarat

Kode Lengkap

Tutorial: Cara Membuat UI WhatsApp

Langkah 1: Struktur HTML

Langkah 2: Styling dengan CSS

Langkah 3: Logika JavaScript

Data Contoh

Mengambil Gambar Profil

Mengisi Daftar Chat

Memuat dan Mengirim Pesan

Langkah 4: Cara Menguji

Tips Pengembangan Lanjutan

Kesimpulan

You may like these posts

Post a Comment

0 Comments

Pencarian Situs

Ads

Kategori KonsepKoding