# Panduan Mengganti Logo SIMAJU

Dokumen ini menjelaskan cara mengganti logo aplikasi SIMAJU di berbagai lokasi.

## 📍 Lokasi Logo di Aplikasi

Saat ini aplikasi SIMAJU menggunakan **icon SVG buku** sebagai logo default. Ada 2 lokasi utama yang perlu diubah:

### 1. **Halaman Login** (`resources/views/auth/login.blade.php`)
   - **Baris 25-29**: Logo icon di bagian atas halaman login

### 2. **Sidebar Dashboard** (`resources/views/simaju/layouts/main.blade.php`)
   - **Baris 42-46**: Logo icon di sidebar menu aplikasi

---

## 🎨 Metode Penggantian Logo

Ada 2 metode yang bisa Anda gunakan:

### **Metode 1: Menggunakan File Gambar (PNG/JPG) - RECOMMENDED**

#### Langkah 1: Siapkan File Logo
- Siapkan file logo Anda (format: PNG/JPG/SVG)
- Nama file: `logo.png` atau `logo-sekolah.png`
- Ukuran rekomendasi: 200x200px atau 512x512px (persegi)

#### Langkah 2: Upload Logo ke Folder Public
```
public/
  └── images/
      └── logo.png          <- Letakkan logo di sini
```

Buat folder `images` jika belum ada:
```bash
mkdir public/images
```

#### Langkah 3: Update Halaman Login
Edit file: `resources/views/auth/login.blade.php`

**Ganti baris 24-29** dari:
```html
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl mb-4">
    <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
    </svg>
</div>
```

**Menjadi:**
```html
<div class="inline-flex items-center justify-center w-20 h-20 mb-4">
    <img src="{{ asset('images/logo.png') }}" alt="Logo SIMAJU" class="w-full h-full object-contain">
</div>
```

#### Langkah 4: Update Sidebar Dashboard
Edit file: `resources/views/simaju/layouts/main.blade.php`

**Ganti baris 42-46** dari:
```html
<div class="w-10 h-10 bg-gradient-to-br from-primary to-secondary rounded-xl flex items-center justify-center">
    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
    </svg>
</div>
```

**Menjadi:**
```html
<div class="w-10 h-10 rounded-xl overflow-hidden bg-white p-1">
    <img src="{{ asset('images/logo.png') }}" alt="Logo" class="w-full h-full object-contain">
</div>
```

---

### **Metode 2: Menggunakan Logo dari Database (Dynamic)**

Jika Anda ingin logo bisa diubah dari halaman pengaturan:

#### Langkah 1: Tambah Field Logo di Pengaturan
Edit migration atau tambahkan kolom `logo` di tabel `pengaturans`

#### Langkah 2: Update View
```html
<!-- Untuk Login Page -->
<div class="inline-flex items-center justify-center w-20 h-20 mb-4">
    @if($pengaturan && $pengaturan->logo)
        <img src="{{ asset('storage/' . $pengaturan->logo) }}" alt="Logo" class="w-full h-full object-contain">
    @else
        <img src="{{ asset('images/logo.png') }}" alt="Logo Default" class="w-full h-full object-contain">
    @endif
</div>

<!-- Untuk Sidebar -->
<div class="w-10 h-10 rounded-xl overflow-hidden bg-white p-1">
    @php
        $pengaturan = \App\Models\Pengaturan::getSetting();
    @endphp
    @if($pengaturan && $pengaturan->logo)
        <img src="{{ asset('storage/' . $pengaturan->logo) }}" alt="Logo" class="w-full h-full object-contain">
    @else
        <img src="{{ asset('images/logo.png') }}" alt="Logo Default" class="w-full h-full object-contain">
    @endif
</div>
```

---

## 🔄 Mengganti Favicon (Icon di Tab Browser)

Edit file: `public/favicon.ico`

1. Siapkan favicon Anda (format: ICO, PNG, atau SVG)
2. Ganti file `public/favicon.ico` dengan favicon baru Anda
3. Atau tambahkan di `<head>` section:

```html
<link rel="icon" type="image/png" href="{{ asset('images/logo.png') }}">
```

---

## 📝 Checklist Penggantian Logo

- [ ] Siapkan file logo (PNG/JPG, ukuran 200x200px atau 512x512px)
- [ ] Upload logo ke `public/images/logo.png`
- [ ] Edit halaman login (`resources/views/auth/login.blade.php`)
- [ ] Edit sidebar dashboard (`resources/views/simaju/layouts/main.blade.php`)
- [ ] (Opsional) Ganti favicon di `public/favicon.ico`
- [ ] Clear cache browser dan test di berbagai halaman
- [ ] Test di mobile untuk memastikan logo terlihat baik

---

## 🎯 Tips & Best Practices

1. **Ukuran Logo**: Gunakan logo dengan resolusi tinggi (minimal 200x200px) untuk hasil tajam
2. **Format File**: 
   - PNG dengan background transparan (recommended)
   - JPG untuk foto/gambar
   - SVG untuk logo vector (ukuran file kecil)
3. **Aspect Ratio**: Gunakan logo berbentuk persegi (1:1) untuk hasil terbaik
4. **File Size**: Usahakan ukuran file < 200KB untuk loading cepat
5. **Nama File**: Gunakan nama yang jelas seperti `logo.png` atau `logo-sekolah.png`

---

## ⚠️ Troubleshooting

### Logo tidak muncul?
1. Cek path file: `public/images/logo.png` harus ada
2. Clear cache: `php artisan cache:clear`
3. Refresh browser dengan Ctrl+F5 (hard refresh)
4. Cek permission folder `public/images` (chmod 755)

### Logo pecah/blur?
1. Gunakan file dengan resolusi lebih tinggi
2. Gunakan format PNG untuk hasil lebih tajam
3. Pastikan aspect ratio 1:1 (persegi)

### Logo terlalu besar/kecil?
Sesuaikan class Tailwind CSS:
- Login page: ubah `w-20 h-20` ke ukuran yang diinginkan
- Sidebar: ubah `w-10 h-10` ke ukuran yang diinginkan

---

## 📞 Bantuan Lebih Lanjut

Jika mengalami kesulitan, silakan hubungi developer atau lihat dokumentasi Laravel tentang:
- Asset Management: https://laravel.com/docs/11.x/helpers#method-asset
- Blade Templates: https://laravel.com/docs/11.x/blade

---

**Dibuat:** 3 Agustus 2026  
**Versi:** 1.0  
**Aplikasi:** SIMAJU SMK Bina Bakti Mawasangka