پروژه فروشگاه اینترنتی با جاوااسکریپت - پنل مدیریت


🎯 اهداف این بخش

  • آشنایی با ساختار پنل مدیریت فروشگاه
  • پیاده سازی سیستم احراز هویت برای مدیران
  • مدیریت محصولات، دسته‌بندی‌ها و کاربران
  • نمایش آمار و گزارشات فروش

📌 ساختار پنل مدیریت

پنل مدیریت شامل بخش‌های اصلی زیر است:

javascript
// ساختار اصلی پنل مدیریت
const adminPanel = {
auth: {...}, // سیستم احراز هویت
products: {...}, // مدیریت محصولات
categories: {...}, // مدیریت دسته‌بندی‌ها
users: {...}, // مدیریت کاربران
orders: {...}, // مدیریت سفارشات
reports: {...} // گزارشات و آمار
};

ویژگی‌های کلیدی پنل مدیریت:

  • سیستم احراز هویت امن: ورود دو مرحله‌ای و مدیریت سطح دسترسی
  • مدیریت محتوا: افزودن، ویرایش و حذف محصولات و دسته‌بندی‌ها
  • پنل گزارش‌دهی: نمایش آمار فروش و تراکنش‌ها

📌 پیاده سازی سیستم احراز هویت

javascript
// تابع ورود به پنل مدیریت
async function adminLogin(username, password) {
try {
// ارسال درخواست به سرور
const response = await fetch('/api/admin/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({username, password})
});
if (!response.ok) throw new Error('خطا در ورود');
const data = await response.json();
localStorage.setItem('adminToken', data.token);
return data;
} catch (error) {
console.error('خطا در ورود:', error);
throw error;
}
}

امنیت در احراز هویت:

  • توکن‌های JWT: برای احراز هویت امن
  • رمزنگاری: استفاده از HTTPS و hash کردن پسوردها
  • مدیریت نشست: زمان انقضا برای توکن‌ها
  • اعتبارسنجی: بررسی اعتبار توکن در هر درخواست

📌 مدیریت محصولات

سیستم CRUD برای مدیریت محصولات:

javascript
// افزودن محصول جدید
async function addProduct(productData) {
const token = localStorage.getItem('adminToken');
const response = await fetch('/api/admin/products', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(productData)
});
if (!response.ok) throw new Error('خطا در افزودن محصول');
return await response.json();
}

ویژگی‌های مدیریت محصولات:

  • افزودن محصول: با تصاویر، توضیحات و مشخصات فنی
  • ویرایش محصول: به‌روزرسانی اطلاعات و موجودی
  • حذف محصول: حذف منطقی یا فیزیکی
  • جستجو و فیلتر: بر اساس دسته‌بندی، قیمت و ...

📌 پنل گزارش‌دهی و آمار

نمایش آمار فروش و تراکنش‌ها:

javascript
// دریافت آمار فروش ماهانه
async function getMonthlySales(year, month) {
const token = localStorage.getItem('adminToken');
const response = await fetch(`/api/admin/reports/sales?year=${year}&month=${month}`, {
headers: {
'Authorization': `Bearer ${token}`
}
});
if (!response.ok) throw new Error('خطا در دریافت آمار');
return await response.json();
}

گزارش‌های قابل ارائه:

گزارش توضیحات
فروش روزانه/هفتگی/ماهانه میزان فروش بر اساس بازه زمانی
محصولات پرفروش لیست محصولات بر اساس تعداد فروش
تراکنش‌های مالی لیست کامل پرداخت‌های موفق
آمار کاربران ثبت‌نام‌ها و فعالیت کاربران

📌 تمرین عملی

تابع مدیریت سفارشات را تکمیل کنید:

javascript
async function updateOrderStatus(orderId, newStatus) {
// کد اینجا نوشته شود
}

راهنمای تمرین:

  1. ارسال درخواست PUT به سرور برای به‌روزرسانی وضعیت سفارش
  2. استفاده از توکن احراز هویت در هدر درخواست
  3. مدیریت خطاهای احتمالی
  4. بررسی وضعیت‌های مجاز برای سفارش

📌 قدم بعدی

در بخش بعدی با بهینه‌سازی و امنیت فروشگاه آشنا خواهیم شد!