Frontend-2/put.html at main · BajuBuddies/Frontend-2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!-- AKAN MENAMPILKAN PUT
Jika catatan ada maka perbarui yang lain buat catatan baru => PUT

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Halaman Edit Informasi</title>
</head>
<body>
    <header>
        <h1>BajuBuddies</h1>
    </header>

    <section class="registration-section">
        <h2>Edit Informasi</h2>
        <form id="edit-form">
            <label for="userId">Input ID yang ingin diubah DATA:</label>
            <input type="text" id="userId" name="userId" >
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" >
            <label for="foto_profil">Foto Profil:</label>
            <input type="file" id="foto_profil" name="foto_profil" required>
            <label for="nama_lengkap">Nama Lengkap:</label>
            <input type="text" id="nama_lengkap" name="nama_lengkap" required>
            <label for="password">Password:</label>
            <input type="text" id="password" name="password" required>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email" required>
            <label for="role">Role:</label>
            <select id="role" name="role">
                <option value="admin">Admin</option>
                <option value="user">Customer</option>
            </select>
            <button style="margin-top: 20px;" type="submit">Ubah</button>
        </form>
        <a href="posting.html" style="text-decoration: underline;">Halaman Show POST</a>
        <a href="getAndHapus.html" style="text-decoration: underline;">Halaman Show Get And Hapus</a>
    </section>

    <section class="show-user">
        <h2>User yang Telah Diperbarui</h2>
        <ul id="user-list">
        </ul>
    </section>

    <script>
        const editForm = document.querySelector('#edit-form');
        const userList = document.getElementById('user-list');

        editForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const userId = document.getElementById('userId').value;
            const url = `https://42e0-111-94-134-70.ngrok-free.app/user/${userId}`;

            const username = document.getElementById('username').value;
            const fotoProfil = document.getElementById('foto_profil').files[0];
            const namaLengkap = document.getElementById('nama_lengkap').value;
            const password = document.getElementById('password').value;
            const email = document.getElementById('email').value;
            const role = document.getElementById('role').value;

            const formData = new FormData();
            formData.append('username', username);
            formData.append('foto_profil', fotoProfil);
            formData.append('nama_lengkap', namaLengkap);
            formData.append('password', password);
            formData.append('email', email);
            formData.append('role', role);

            fetch(url, {
                method: 'PUT',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Terjadi kesalahan saat melakukan PUT request.');
                }
                return response.json();
            })
            .then(data => {
                console.log('Data telah diperbarui:', data);
                userList.innerHTML = '';
                const listItem = document.createElement('li');
                listItem.textContent = `ID: ${data.userId}, Username: ${data.username}, Foto Profil: ${data.fotoProfil},Nama Lengkap: ${data.nama_lengkap}, Email: ${data.email}, Role: ${data.role}`;
                userList.appendChild(listItem);
            })
            .catch(error => {
                console.error('Terjadi kesalahan:', error);
            });
        });
    </script>

</body>
</html>