Pendahuluan

Dashboard adalah bagian penting dalam sebuah aplikasi yang berfungsi untuk menampilkan informasi utama bagi pengguna. Dalam artikel ini, kita akan membuat dashboard sederhana menggunakan HTML, CSS, dan JavaScript dengan fitur:

Header dengan teks "Selamat Datang di ABCDE Channel"
Sidebar Menu untuk navigasi
Profil Pengguna yang menampilkan nama dan foto profil
Tombol Logout untuk keluar dari akun
Fitur Registrasi & Login untuk banyak pengguna

Dengan tutorial ini, Anda akan dapat membuat dashboard interaktif yang bisa menampilkan data pengguna yang sudah login.

1. Membuat Struktur HTML

Buat file dashboard.html dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Sidebar -->
    <div class="sidebar">
        <h2>ABCDE Channel</h2>
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Ubah Data</a></li>
            <li><a href="#">Isi Data</a></li>
            <li><a href="#">Isi Alamat</a></li>
            <li><a href="login.html" onclick="logout()">Logout</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <div class="header">Selamat Datang di ABCDE Channel</div>
        <div class="profile">
            <img src="profile.jpg" alt="Foto Profil" id="profileImage">
            <div class="profile-info" id="username">User</div>
        </div>
    </div>

    <script>
        document.getElementById('username').innerText = localStorage.getItem('loggedInUser') || 'Guest';
        
        function logout() {
            localStorage.removeItem('loggedInUser');
            alert('Logout berhasil!');
            window.location.href = 'login.html';
        }
    </script>
</body>
</html>

2. Mendesain Tampilan dengan CSS

Buat file styles.css dengan kode berikut:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    background: #ecf0f1;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: #2c3e50;
    color: white;
    height: 100vh;
    padding-top: 20px;
    position: fixed;
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar ul li {
    padding: 15px;
    text-align: left;
}
.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: block;
}
.sidebar ul li:hover {
    background: #34495e;
}

/* Main Content */
.main-content {
    margin-left: 250px;
    padding: 20px;
    width: calc(100% - 250px);
}
.header {
    background: #2980b9;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.profile {
    display: flex;
    align-items: center;
    margin: 20px 0;
    background: white;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.profile img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
}
.profile-info {
    font-size: 18px;
    font-weight: bold;
}

3. Membuat Halaman Registrasi

Buat file register.html dengan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>
<body>
    <h2>Daftar Akun</h2>
    <form id="registerForm">
        <label>Username:</label><br>
        <input type="text" id="username" required><br>
        
        <label>Email:</label><br>
        <input type="email" id="email" required><br>

        <label>Nomor Telepon:</label><br>
        <input type="text" id="phone" required><br>

        <label>Password:</label><br>
        <input type="password" id="password" required><br>

        <button type="submit">Daftar</button>
    </form>

    <script>
        document.getElementById('registerForm').addEventListener('submit', function(event) {
            event.preventDefault();
            
            let username = document.getElementById('username').value;
            let email = document.getElementById('email').value;
            let phone = document.getElementById('phone').value;
            let password = document.getElementById('password').value;

            let users = JSON.parse(localStorage.getItem('users')) || [];

            if (users.some(user => user.username === username)) {
                alert('Username sudah digunakan, silakan pilih yang lain.');
                return;
            }

            users.push({ username, email, phone, password });
            localStorage.setItem('users', JSON.stringify(users));

            alert('Pendaftaran berhasil! Silakan login.');
            window.location.href = 'login.html';
        });
    </script>
</body>
</html>

Kesimpulan

Dengan kode di atas, kita telah membuat dashboard interaktif yang memungkinkan pengguna untuk mendaftar, login, dan logout dengan data tersimpan di browser menggunakan localStorage.

Selamat mencoba! 🚀

Origin Download

Cara Membuat Dashboard Sederhana dengan HTML, CSS, dan JavaScript

Pendahuluan

1. Membuat Struktur HTML

2. Mendesain Tampilan dengan CSS

3. Membuat Halaman Registrasi

Kesimpulan

Posting Komentar untuk "Cara Membuat Dashboard Sederhana dengan HTML, CSS, dan JavaScript"

Menu Halaman Statis