update foto

Untuk halaman update foto profil siswa, saya sarankan jangan hanya menampilkan foto bulat dan tombol upload biasa. Buatlah seperti pengalaman di Instagram, WhatsApp, atau Facebook agar terasa modern dan premium.

Contoh layout yang elegan:

┌────────────────────────────┐
│      Foto Profil           │
│                            │
│        ( FOTO )            │
│           📷               │
│                            │
│       Evander              │
│       Bimbel SMP           │
│                            │
│ [ Pilih Foto Baru ]        │
│                            │
│ Drag & Drop atau klik      │
│                            │
│  Preview Foto Baru         │
│                            │
│ [ Batal ] [ Simpan ]       │
└────────────────────────────┘

Desain ala Media Sosial

Foto profil diberi tombol kamera mengambang di kanan bawah.

<div class="profile-wrapper">
    
    <img src="foto.jpg" class="profile-image">

    <button class="camera-btn">
        <i class="bi bi-camera-fill"></i>
    </button>

</div>

CSS:

.profile-wrapper{
    position:relative;
    width:140px;
    margin:auto;
}

.profile-image{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #fff;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
}

.camera-btn{
    position:absolute;
    right:0;
    bottom:5px;
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:#0d6efd;
    color:white;
    font-size:18px;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
}

Hasilnya akan seperti:

       ○○○○○○○○
     ○           ○
    ○    FOTO     ○
     ○           ○
       ○○○○○○○○
             📷

---

Modal Upload Modern

Saat tombol kamera diklik:

<div class="modal fade" id="uploadFotoModal">

Isi modal:

┌────────────────────┐
│ Update Foto Profil │
├────────────────────┤
│  📷 Ambil Foto     │
│                    │
│  🖼️ Pilih Galeri   │
│                    │
│  🗑️ Hapus Foto     │
└────────────────────┘

Bootstrap:

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action">
    <i class="bi bi-camera me-2"></i>
    Ambil Foto
</a>

<a href="#" class="list-group-item list-group-item-action">
    <i class="bi bi-image me-2"></i>
    Pilih dari Galeri
</a>

<a href="#" class="list-group-item list-group-item-action text-danger">
    <i class="bi bi-trash me-2"></i>
    Hapus Foto
</a>

</div>

---

Preview Sebelum Simpan

Seperti WhatsApp:

<input type="file"
       id="photoInput"
       accept="image/*"
       hidden>

<img id="preview"
     src="foto-default.jpg">

Javascript:

document
.getElementById('photoInput')
.addEventListener('change', function(e){

    const file = e.target.files[0];

    if(file){
        document.getElementById('preview').src =
            URL.createObjectURL(file);
    }

});

---

Level Premium (Rekomendasi)

Untuk aplikasi bimbel Gardenia 1, saya akan membuat:

• Foto profil besar di tengah
• Tombol kamera floating
• Modal Bottom Sheet seperti aplikasi Android modern
• Preview foto langsung
• Crop foto sebelum upload
• Kompres otomatis
• Drag & Drop di desktop
• Pilih Kamera/Galeri di smartphone
• Animasi halus Bootstrap 5

Tampilannya akan sangat mirip pengalaman pengguna di Instagram dan WhatsApp, sehingga terlihat profesional dan modern.