6.2 KiB

Raw Blame History

Setup Notifikasi Sistem Klasifikasi Tomat

🚨 Masalah Saat Ini

Notifikasi menyebabkan 404 karena route tidak ada
Redirect ke halaman yang belum dibuat

✅ Solusi Sederhana (SUDAH DIPERBAIKI)

Notifikasi sekarang hanya menampilkan toast "dibaca"
Tidak ada redirect yang menyebabkan 404
Aman digunakan

🎯 Saran Implementasi Lengkap

1. Buat Route di `routes/web.php`

// Admin Notifications
Route::get('/admin/notifications', [NotificationController::class, 'index'])->name('admin.notifications');
Route::get('/admin/classifications', [ClassificationController::class, 'index'])->name('admin.classifications');
Route::get('/admin/uploads', [UploadController::class, 'index'])->name('admin.uploads');
Route::get('/admin/model', [ModelController::class, 'index'])->name('admin.model');
Route::get('/admin/activity', [ActivityController::class, 'index'])->name('admin.activity');

2. Buat Controller

// app/Http/Controllers/Admin/NotificationController.php
class NotificationController extends Controller
{
    public function index()
    {
        $notifications = auth()->user()->notifications()->paginate(20);
        return view('admin.notifications.index', compact('notifications'));
    }
}

3. Buat Database Migration

// create_notifications_table
Schema::create('notifications', function (Blueprint $table) {
    $table->id();
    $table->foreignId('user_id')->constrained();
    $table->string('type'); // classification, upload, model, activity
    $table->string('title');
    $table->text('message');
    $table->boolean('read')->default(false);
    $table->timestamps();
});

4. Real-time dengan Pusher/Soketi

// Echo/Laravel Echo
Echo.private('user.' + userId)
    .notification((notification) => {
        addNewNotification(notification.type, notification.title, notification.message);
    });

5. Backend Notification System

// Helper function
function sendNotification($userId, $type, $title, $message)
{
    $notification = [
        'user_id' => $userId,
        'type' => $type,
        'title' => $title,
        'message' => $message,
        'read' => false
    ];
    
    Notification::create($notification);
    
    // Broadcast real-time
    broadcast(new NewNotification($notification));
}

📝 Trigger Points

Klasifikasi Baru

// Di ClassificationController
sendNotification(
    auth()->id(),
    'classification',
    'Klasifikasi Baru',
    "$count gambar tomat berhasil diklasifikasikan"
);

Upload Baru

// Di UploadController
sendNotification(
    auth()->id(),
    'upload', 
    'Upload Baru',
    "$count gambar baru diunggah ke dataset"
);

Status Model

// Di ModelController setelah training
sendNotification(
    auth()->id(),
    'model',
    'Status Model', 
    "Model berhasil diperbarui dengan akurasi $accuracy%"
);

Aktivitas Admin

// Di ActivityController
sendNotification(
    $adminId,
    'activity',
    'Aktivitas Admin',
    $activityDescription
);

🔧 Update Layout (Optional)

Jika sudah ada route, update JavaScript di app.blade.php:

// Ganti handleNotificationClick function
function handleNotificationClick(type) {
    const routes = {
        'classification': '{{ route("admin.classifications") }}',
        'upload': '{{ route("admin.uploads") }}',
        'model': '{{ route("admin.model") }}',
        'activity': '{{ route("admin.activity") }}'
    };
    
    window.location.href = routes[type] || '{{ route("admin.dashboard") }}';
}

Tambahkan widget notifikasi di dashboard:

<!-- Di dashboard.blade.php -->
<div class="bg-white rounded-lg shadow p-6">
    <h3 class="text-lg font-semibold mb-4">Notifikasi Terbaru</h3>
    <div class="space-y-3">
        @foreach($recentNotifications as $notif)
            <div class="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded">
                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-bell text-blue-600 text-sm"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium">{{ $notif->title }}</p>
                    <p class="text-xs text-gray-500">{{ $notif->created_at->diffForHumans() }}</p>
                </div>
            </div>
        @endforeach
    </div>
</div>

🎨 UI Improvements

1. Badge Counter

// Update badge dengan jumlah notifikasi
function updateNotificationBadge(count) {
    const badge = document.getElementById('notificationBadge');
    if (count > 0) {
        badge.textContent = count > 99 ? '99+' : count;
        badge.classList.remove('hidden');
    } else {
        badge.classList.add('hidden');
    }
}

2. Sound Notification

// Play sound untuk notifikasi baru
function playNotificationSound() {
    const audio = new Audio('/sounds/notification.mp3');
    audio.play().catch(e => console.log('Audio play failed:', e));
}

3. Browser Push Notification

// Request permission dan show push notification
if ('Notification' in window && Notification.permission === 'granted') {
    new Notification('Notifikasi Baru', {
        body: message,
        icon: '/icon.png'
    });
}

🚀 Production Setup

1. Queue System

// Use queue untuk notifikasi
sendNotification($userId, $type, $title, $message)
    ->delay(now()->addSeconds(1))
    ->onQueue('notifications');

2. Cache Performance

// Cache notifikasi untuk performance
$notifications = Cache::remember(
    "user_{$userId}_notifications", 
    300, // 5 minutes
    fn() => $user->notifications()->latest()->limit(50)->get()
);

3. Cleanup Old Notifications

// Schedule cleanup
$schedule->command('notifications:cleanup')->daily();

📱 Mobile Responsiveness

/* Mobile notification styles */
@media (max-width: 768px) {
    #notificationDropdown {
        width: 100vw;
        right: 0;
        left: 0;
        max-height: 50vh;
    }
}

✅ Status Saat Ini: AMAN

Notifikasi sudah bekerja dengan baik tanpa error 404. Implementasi lengkap di atas adalah opsional untuk pengembangan lebih lanjut.

6.2 KiB Raw Blame History