فلشکارتهای آموزشی ساخت سیستم های E-learning Platform Backend با اکسپرس.js
🎓 دوره آموزشی جامع 📚 اطلاعات دوره
عنوان دوره: ساخت سیستم های E-learning Platform Backend با اکسپرس.jsموضوع کلی: برنامه نویسیموضوع میانی: اکسپرس (Express.js) 📋 سرفصل‌های دوره (100 موضوع) - 1. معرفی جاوااسکریپت برای بک‌اند
- 2. Node.js چیست و چرا برای بک‌اند؟
- 3. نصب Node.js و NPM
- 4. ماژول‌ها در Node.js (CommonJS و ES Modules)
- 5. مفاهیم Asynchronous در جاوااسکریپت: Callbacks, Promises, Async/ Await
- 6. کار با File System در Node.js
- 7. ایجاد یک HTTP Server ساده با Node.js
- 8. مقدمه‌ای بر NPM Scripts و مدیریت پکیج‌ها
- 9. مفاهیم اولیه TypeScript (مقدماتی)
- 10. ESNext Features مفید برای Node.js
- 11. معرفی Express.js و معماری آن
- 12. نصب و راه‌اندازی پروژه Express.js
- 13. ساخت اولین سرور Express
- 14. مسیریابی (Routing) پایه در Express
- 15. پارامترهای مسیر و Query Strings
- 16. Middleware در Express: مفاهیم و کاربردها
- 17. نوشتن Custom Middleware
- 18. کار با Body Parsers (express.json, express.urlencoded)
- 19. Request و Response Object
- 20. مدیریت ارورها در Express (Error Handling)
- 21. ساختاردهی پروژه Express (فولدرها، فایل‌ها)
- 22. Static Files و serving آن‌ها
- 23. View Engines (مانند Pug, EJS) - مقدماتی
- 24. استفاده از.env برای متغیرهای محیطی
- 25. معرفی ابزارهای توسعه: Nodemon
- 26. معرفی پایگاه داده NoSQL و MongoDB
- 27. نصب و راه‌اندازی MongoDB
- 28. مفاهیم اولیه NoSQL: Collections, Documents
- 29. اتصال به MongoDB از طریق Node.js (MongoDB Driver)
- 30. معرفی Mongoose: ODM برای MongoDB
- 31. نصب Mongoose و اتصال به پایگاه داده
- 32. تعریف Schema در Mongoose
- 33. ساخت Model از Schema
- 34. عملیات CRUD: ایجاد (Create) سند
- 35. عملیات CRUD: خواندن (Read) سندها
- 36. عملیات CRUD: به‌روزرسانی (Update) سندها
- 37. عملیات CRUD: حذف (Delete) سندها
- 38. اعتبارسنجی (Validation) داده‌ها در Mongoose Schema
- 39. روابط (Relationships) در Mongoose (Referencing, Embedding)
- 40. Populate کردن داده‌ها در Mongoose
- 41. اصول طراحی RESTful API
- 42. طراحی Endpoints برای E-learning Platform
- 43. پیاده‌سازی GET Requests (دریافت داده)
- 44. پیاده‌سازی POST Requests (ایجاد داده)
- 45. پیاده‌سازی PUT/ PATCH Requests (به‌روزرسانی داده)
- 46. پیاده‌سازی DELETE Requests (حذف داده)
- 47. اعتبارسنجی ورودی کاربر با Joi یا Express-Validator
- 48. Pagination و Sorting داده‌ها
- 49. Filtering و Searching داده‌ها
- 50. پیاده‌سازی پاسخ‌های استاندارد API (Success/ Error)
- 51. مفاهیم Authentication و Authorization
- 52. استراتژی‌های Authentication (Token-based, Session-based)
- 53. پیاده‌سازی User Model با Mongoose
- 54. رمزنگاری پسورد با Bcrypt.js
- 55. ثبت نام کاربر (User Registration)
- 56. ورود کاربر (User Login)
- 57. معرفی JSON Web Tokens (JWT)
- 58. تولید و اعتبارسنجی JWT
- 59. محافظت از Routes با JWT Middleware
- 60. مدیریت Refresh Tokens
- 61. پیاده‌سازی فراموشی رمز عبور (Password Reset)
- 62. اعتبارسنجی ایمیل (Email Verification)
- 63. مدیریت نقش‌ها (Role-Based Access Control - RBAC)
- 64. پیاده‌سازی Middleware برای مجوزدهی (Authorization)
- 65. Cross-Origin Resource Sharing (CORS)
- 66. مدل‌سازی دوره آموزشی (Course Model)
- 67. مدل‌سازی دروس/ محتوا (Lesson/ Content Model)
- 68. API برای مدیریت دوره‌ها (CRUD Courses)
- 69. API برای مدیریت دروس (CRUD Lessons)
- 70. مدیریت آپلود فایل (تصاویر، ویدئوها) با Multer
- 71. ادغام با Cloud Storage (مانند Cloudinary یا S3)
- 72. مدل‌سازی کاربران و پروفایل آن‌ها
- 73. API برای مدیریت پروفایل کاربر
- 74. ثبت نام کاربر در دوره (Enrollment)
- 75. پیگیری پیشرفت کاربر در دوره
- 76. API برای نشانه‌گذاری درس‌های تکمیل شده
- 77. ساخت سیستم Quiz/ Question Model
- 78. API برای ایجاد و مدیریت کوییزها
- 79. API برای ثبت پاسخ‌های کاربر و نمره‌دهی
- 80. مدل‌سازی برای سیستم نظرات (Comments)
- 81. API برای ارسال و دریافت نظرات
- 82. پیاده‌سازی سیستم Rating/ Review برای دوره‌ها
- 83. مقدمه‌ای بر Integration با درگاه پرداخت (مثال: Stripe Webhooks)
- 84. مدیریت پرداخت‌ها و وضعیت تراکنش‌ها
- 85. ارسال ایمیل اعلانات (با Nodemailer)
- 86. بهینه‌سازی عملکرد Express (Caching, Gzip)
- 87. افزایش امنیت با Helmet.js
- 88. Logging با Winston یا Morgan
- 89. Rate Limiting برای جلوگیری از حملات DoS
- 90. Error Logging و مانیتورینگ پروژه
- 91. مقدمه‌ای بر تست‌نویسی در Node.js
- 92. تست Unit با Jest یا Mocha/ Chai
- 93. تست Integration برای API Endpoints
- 94. Mocking و Stubbing در تست‌ها
- 95. نوشتن تست برای Authentication و Authorization
- 96. آماده‌سازی پروژه برای Production
- 97. مدیریت متغیرهای محیطی در Production
- 98. استقرار در Heroku/ Render/ Vercel (با مثال)
- 99. استفاده از PM2 برای مدیریت فرآیندها
- 100. Best Practices در توسعه و نگهداری بک‌اند
دوره جامع ساخت بک‌اند پلتفرم آموزشی با Express.js</ title>
</ head>
<body> <header> <h1>دوره جامع ساخت سیستم‌های E-learning Platform Backend با Express.js: از ایده تا استقرار</ h1> </ header> <main> <section id="introduction"> <h2>صفر تا صد ساخت یک غول آموزشی آنلاین با قدرت Express.js</ h2> <p>آیا تا به حال به این فکر کرده‌اید که موتور محرک پلتفرم‌های آموزشی بزرگی مانند ، Coursera یا نمونه‌های موفق داخلی چگونه کار می‌کند؟ چگونه هزاران کاربر، دوره، ویدیو، پرداخت و پیشرفت تحصیلی مدیریت می‌شوند؟ پاسخ در یک کلمه خلاصه می‌شود: <strong>بک‌اند قدرتمند</ strong>. یک بک‌اند که بتواند به صورت همزمان درخواست‌های بی‌شمار را پردازش کند، امنیت داده‌ها را تضمین نماید و تجربه‌ای روان و بدون وقفه برای کاربران و مدرسان فراهم آورد.</ p> <p>در دوره جامع «ساخت بک‌اند پلتفرم‌های آموزشی با Express.js»، ما شما را به سفری هیجان‌انگیز می‌بریم تا مغز متفکر یک سیستم E-learning مدرن را از صفر و با دستان خودتان بسازید. این دوره فقط مجموعه‌ای از آموزش‌های تئوریک نیست؛ بلکه یک کارگاه عملی و پروژه-محور است که در پایان آن، شما یک API کامل، مقیاس‌پذیر و آماده به کار برای یک پلتفرم آموزشی خواهید داشت. ما به شما یاد می‌دهیم چگونه با استفاده از Express.js، یکی از محبوب‌ترین و قدرتمندترین فریمورک‌های Node.js، ایده‌های خود را به یک محصول واقعی و قابل ارائه در بازار کار تبدیل کنید.</ p> </ section> <section id="about-course"> <h2>درباره این دوره: بیش از یک آموزش، یک تجربه ساخت واقعی</ h2> <p>این دوره به گونه‌ای طراحی شده است که شما را مستقیماً وارد گود برنامه‌نویسی یک پروژه واقعی کند. ما از یک پوشه خالی شروع می‌کنیم و قدم به قدم، ماژول به ماژول، یک بک‌اند پیچیده را توسعه می‌دهیم. شما یاد می‌گیرید که چگونه یک معماری تمیز و قابل توسعه (Clean Architecture) را پیاده‌سازی کنید، با دیتابیس MongoDB به صورت حرفه‌ای کار کنید، سیستم احراز هویت و مدیریت دسترسی (Authentication & Authorization) را با استفاده از JWT پیاده‌سازی نمایید، فرآیند آپلود و مدیریت فایل‌های حجیم مانند ویدیوها را بهینه کنید و در نهایت، سیستم خود را برای استقرار نهایی (Deployment) با استفاده از Docker آماده سازید.</ p> </ section> <section id="key-topics"> <h3>موضوعات کلیدی که در این دوره فتح خواهید کرد: </ h3> <ul> <li>طراحی و پیاده‌سازی معماری RESTful API مدرن و قدرتمند</ li> <li>مدیریت کاربران، نقش‌ها (Admin, Teacher, Student) و سطوح دسترسی</ li> <li>ساخت سیستم مدیریت دوره‌ها، فصل‌ها، درس‌ها و ویدیوها (CRUD کامل)</ li> <li>پیاده‌سازی سیستم ثبت‌نام و ورود امن با توکن‌های وب JSON (JWT)</ li> <li>پردازش آپلود فایل‌های حجیم (ویدیو، تصویر، جزوه) با Multer و مدیریت آن‌ها</ li> <li>اتصال به درگاه پرداخت آنلاین و مدیریت تراکنش‌ها و اشتراک‌های کاربران</ li> <li>طراحی مدل‌های داده (Schema Design) پیشرفته با Mongoose برای MongoDB</ li> <li>پیاده‌سازی سیستم اعتبارسنجی (Validation) حرفه‌ای برای ورودی‌های API</ li> <li>نوشتن تست‌های واحد و یکپارچه‌سازی (Unit & Integration Tests) با Jest و Supertest</ li> <li>بهینه‌سازی عملکرد (Performance Optimization) و مدیریت خطای پیشرفته</ li> <li>پیاده‌سازی اصول امنیتی برای مقابله با حملات رایج وب (XSS, CSRF,...)</ li> <li>کانتینرسازی اپلیکیشن با Docker برای استقرار آسان و ایزوله</ li> </ ul> </ section> <section id="target-audience"> <h2>این دوره برای چه کسانی یک سکوی پرتاب است؟</ h2> <p>این دوره برای طیف وسیعی از علاقه‌مندان به دنیای برنامه‌نویسی بک‌اند طراحی شده است، اما افراد زیر بیشترین بهره را از آن خواهند برد: </ p> <ul> <li><strong>توسعه‌دهندگان فرانت‌اند: </ strong> که با JavaScript آشنا هستند و می‌خواهند با یادگیری بک‌اند به یک توسعه‌دهنده فول-استک (Full-Stack) تبدیل شوند.</ li> <li><strong>برنامه‌نویسان Node.js: </ strong> که به دنبال ارتقای مهارت‌های خود و ساخت یک پروژه بزرگ و واقعی برای تقویت رزومه خود هستند.</ li> <li><strong>دانشجویان و فارغ‌التحصیلان کامپیوتر: </ strong> که می‌خواهند دانش تئوری خود را به یک مهارت عملی و پول‌ساز تبدیل کنند.</ li> <li><strong>فریلنسرها و کارآفرینان: </ strong> که قصد دارند پلتفرم آموزشی خود را راه‌اندازی کنند یا پروژه‌های مشابهی را برای مشتریان خود انجام دهند.</ li> <li><strong>توسعه‌دهندگان با تجربه در زبان‌های دیگر: </ strong> که می‌خواهند به سرعت و به صورت عملی با اکوسیستم Node.js و Express.js آشنا شوند.</ li> </ ul> </ section> <section id="why-this-course"> <h2>چرا باید در این دوره سرمایه‌گذاری کنید؟</ h2> <h3>۱. کاملاً پروژه-محور و عملی</ h3> <p>ما به شما ماهیگیری یاد می‌دهیم! به جای ارائه مفاهیم تئوریک خسته‌کننده، شما از اولین جلسه کد می‌زنید و با چالش‌های واقعی یک پروژه بزرگ دست و پنجه نرم می‌کنید. این تجربه عملی، بهترین راه برای یادگیری عمیق و ماندگار است.</ p> <h3>۲. پوشش جامع از صفر تا استقرار</ h3> <p>ما هیچ بخشی را ناگفته رها نمی‌کنیم. از انتخاب نام پروژه و راه‌اندازی اولیه گرفته تا نوشتن تست‌های حرفه‌ای، پیاده‌سازی لایه‌های امنیتی و در نهایت، داکرایز کردن و آماده‌سازی برای استقرار روی سرور، همه چیز در این دوره پوشش داده شده است.</ p> <h3>۳. تقویت فوق‌العاده رزومه و آمادگی برای بازار کار</ h3> <p>داشتن یک پروژه پیچیده و کامل مانند بک‌اند یک پلتفرم E-learning در رزومه شما، یک برگ برنده قدرتمند در مصاحبه‌های شغلی است. شما نه تنها دانش خود را اثبات می‌کنید، بلکه نشان می‌دههید که توانایی مدیریت و اجرای پروژه‌های بزرگ را دارید.</ p> <h3>۴. یادگیری بهترین شیوه‌ها (Best Practices)</ h3> <p>صرفاً کدنویسی کافی نیست؛ کدنویسی صحیح، تمیز و بهینه اهمیت دارد. در این دوره، ما بر روی معماری صحیح، کد تمیز (Clean Code)، اصول SOLID و استانداردهای امنیتی تمرکز ویژه‌ای داریم تا شما را به یک توسعه‌دهنده حرفه‌ای تبدیل کنیم.</ p> </ section> <section id="syllabus"> <h2>نقشه راه شما: بیش از ۱۰۰ سرفصل جامع و دقیق</ h2> <p>این دوره با بیش از <strong>۱۰۰ سرفصل دقیق و جزئی</ strong>، عمیق‌ترین و کامل‌ترین منبع آموزشی برای ساخت بک‌اند پلتفرم‌های آموزشی با Express.js به زبان فارسی است. ما تمام مسیر را برای شما روشن کرده‌ایم و شما را قدم به قدم تا رسیدن به مقصد همراهی می‌کنیم. نگاهی گذرا به برخی از فصل‌های اصلی دوره بیندازید: </ p> <ul> <li><strong>فصل اول: </ strong> مقدمات، راه‌اندازی محیط و ساختار پروژه (شامل ۱۰ سرفصل)</ li> <li><strong>فصل دوم: </ strong> معماری پروژه، لایه‌بندی و مدیریت ماژول‌ها (شامل ۸ سرفصل)</ li> <li><strong>فصل سوم: </ strong> سیستم جامع احراز هویت و مدیریت کاربران (شامل ۱۶ سرفصل)</ li> <li><strong>فصل چهارم: </ strong> ماژول مدیریت دوره‌ها، مدرسان و دسته‌بندی‌ها (شامل ۱۸ سرفصل)</ li> <li><strong>فصل پنجم: </ strong> مدیریت محتوای آموزشی (فصل، درس، ویدیو و متن) (شامل ۱۵ سرفصل)</ li> <li><strong>فصل ششم: </ strong> آپلود و پردازش بهینه فایل‌ها و ویدیوها (شامل ۹ سرفصل)</ li> <li><strong>فصل هفتم: </ strong> سیستم خرید دوره و اتصال به درگاه پرداخت (شامل ۱۱ سرفصل)</ li> <li><strong>فصل هشتم: </ strong> تست‌نویسی حرفه‌ای (Unit & Integration Testing) (شامل ۱۰ سرفصل)</ li> <li><strong>فصل نهم: </ strong> امنیت پیشرفته، بهینه‌سازی و استقرار نهایی با Docker (شامل ۱۳ سرفصل)</ li> </ ul> <p><strong>آیا برای ساختن پروژه بزرگ بعدی خود و جهش در مسیر حرفه‌ای‌تان آماده‌اید؟</ strong></ p> <p>همین حالا در این دوره بی‌نظیر ثبت‌نام کنید و سفر خود را برای تبدیل شدن به یک متخصص بک‌اند آغاز کنید!</ p> </ section> </ main> </ body>
</ html></ div><div style="background: #f0f8ff; border: 2px solid #4A90E2; border-radius: 8px; padding: 20px; margin: 30px 0;"> <h3 style="color: #1F3A5E; margin-bottom: 15px;">📦 مجموعه شامل: </ h3> <ul style="list-style-type: none; padding: 0; margin: 0;"> <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">✅ ویدیوهای فارسی</ li> <li style="padding: 10px 0; border-bottom: 1px solid #ddd;"> ✅ پادکست های صوتی فارسی</ li> <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">✅ کتاب PDF فارسی</ li> <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">✅ کتاب ۱۰۰۰ نکته فارسی خودمونی</ li> <li style="padding: 10px 0; border-bottom: 1px solid #ddd;">✅ کتاب ۱۰۰۰ نکته رسمی فارسی</ li> <li style="padding: 10px 0;">✅ کتاب ۱۰۰۰ پرسش و پاسخ ۴ گزینه ای فارسی</ li> </ ul> </ div>[/ sc]
<div dir="rtl" style="max-width:900px;margin:24px auto;font-family:Tahoma,Arial,sans-serif;line-height:2;color:#26364a;">
<!-- HERO -->
<div style="box-sizing:border-box;padding:38px 25px;border-radius:24px;background:linear-gradient(135deg,#101c34,#173b5a 60%,#246c73);text-align:center;color:#fff;">
<div style="font-size:12px;letter-spacing:1.5px;color:#e8c77e;margin-bottom:12px;">SMART LEARNING PLATFORM</div>
<div style="font-size:29px;font-weight:800;line-height:1.8;margin-bottom:12px;">از مطالعه تا یادگیری ماندگار</div>
<div style="max-width:650px;margin:0 auto;font-size:15px;color:#e0eaf3;">
فراتر از یک مجموعه فلش‌کارت؛ تجربه‌ای تعاملی برای یادگیری، تمرین، مرور هوشمند و مشاهده مسیر پیشرفت شما، همراه با امکان دریافت گواهی پایان دوره در دوره‌های واجد شرایط.
</div>
<div style="display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:23px;">
<span style="font-size:12px;border:1px solid #60778d;border-radius:25px;padding:6px 14px;">مرور فاصله‌دار</span>
<span style="font-size:12px;border:1px solid #60778d;border-radius:25px;padding:6px 14px;">آمار یادگیری</span>
<span style="font-size:12px;border:1px solid #60778d;border-radius:25px;padding:6px 14px;">گواهی دوزبانه</span>
</div>
</div>
<!-- INTRO -->
<div style="padding:30px 5px 12px;text-align:center;">
<div style="font-size:24px;font-weight:800;color:#173c5a;margin-bottom:10px;">یادگیری را به یک مسیر قابل پیگیری تبدیل کنید</div>
<div style="font-size:15px;color:#657489;">
با ورود به سامانه آموزشی، محتوای دوره را به‌صورت مرحله‌ای دنبال کنید، فلش‌کارت‌ها را مرور کنید، دانش خود را با پرسش‌ها و آزمون‌ها بسنجید و روند پیشرفتتان را در طول مسیر ببینید.
</div>
</div>
<!-- FEATURE CARDS -->
<div style="display:flex;flex-wrap:wrap;gap:14px;margin:20px 0;">
<div style="box-sizing:border-box;flex:1 1 250px;padding:22px;border:1px solid #dce6ef;border-radius:18px;background:linear-gradient(145deg,#f1f6fc,#fff);">
<div style="font-size:25px;color:#285c86;margin-bottom:9px;">⟳</div>
<div style="font-size:17px;font-weight:800;color:#193e5d;margin-bottom:7px;">مرور فاصله‌دار هوشمند</div>
<div style="font-size:14px;color:#627286;">
با مرور زمان‌دار، کارت‌های تازه و کارت‌های سررسیدشده را بر اساس برنامه مرور دنبال کنید. ارزیابی پاسخ‌ها به زمان‌بندی مرورهای بعدی کمک می‌کند تا تمرین متناسب‌تری داشته باشید.
</div>
</div>
<div style="box-sizing:border-box;flex:1 1 250px;padding:22px;border:1px solid #dcebe5;border-radius:18px;background:linear-gradient(145deg,#eef9f5,#fff);">
<div style="font-size:25px;color:#278168;margin-bottom:9px;">◉</div>
<div style="font-size:17px;font-weight:800;color:#193e5d;margin-bottom:7px;">مشاهده مسیر پیشرفت</div>
<div style="font-size:14px;color:#627286;">
میزان مشاهده فلش‌کارت‌ها، فعالیت‌های مرور، عملکرد آزمون‌ها و آمار یادگیری را بررسی کنید و تصویر روشن‌تری از مسیر آموزشی خود داشته باشید.
</div>
</div>
<div style="box-sizing:border-box;flex:1 1 250px;padding:22px;border:1px solid #eee4d0;border-radius:18px;background:linear-gradient(145deg,#fff9ed,#fff);">
<div style="font-size:25px;color:#a17b32;margin-bottom:9px;">▤</div>
<div style="font-size:17px;font-weight:800;color:#193e5d;margin-bottom:7px;">یادگیری مرحله‌به‌مرحله</div>
<div style="font-size:14px;color:#627286;">
فصل‌ها و بخش‌های آموزشی را به ترتیب دنبال کنید، مطالب دیده‌نشده را پیدا کنید و بدون سردرگمی به ادامه مسیر برگردید.
</div>
</div>
<div style="box-sizing:border-box;flex:1 1 250px;padding:22px;border:1px solid #e5dff1;border-radius:18px;background:linear-gradient(145deg,#f7f3fd,#fff);">
<div style="font-size:25px;color:#7a5ab1;margin-bottom:9px;">✓</div>
<div style="font-size:17px;font-weight:800;color:#193e5d;margin-bottom:7px;">تمرین و سنجش آموخته‌ها</div>
<div style="font-size:14px;color:#627286;">
با نکته‌های آموزشی، پرسش و پاسخ، کوییزها و آزمون‌های پایان فصل، دانسته‌های خود را تمرین کنید و بخش‌هایی را که به توجه بیشتری نیاز دارند بشناسید.
</div>
</div>
</div>
<!-- SMART REVIEW -->
<div style="box-sizing:border-box;margin:30px 0;padding:28px 24px;border-radius:20px;background:#f2f7fa;border:1px solid #dce7ef;">
<div style="font-size:12px;font-weight:bold;color:#438095;letter-spacing:1px;margin-bottom:7px;">SMART REVIEW</div>
<div style="font-size:23px;font-weight:800;color:#173c5a;margin-bottom:12px;">هر بار، مرور هدفمندتر</div>
<div style="font-size:14px;color:#5c6f81;margin-bottom:20px;">
لازم نیست هر روز از ابتدا درباره اینکه چه چیزی را مرور کنید تصمیم بگیرید. سامانه، صف مرور روزانه را بر اساس کارت‌های تازه و موعد مرور کارت‌ها آماده می‌کند. شما پاسخ را ارزیابی می‌کنید و برنامه مرور با توجه به آن تنظیم می‌شود.
</div>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="box-sizing:border-box;flex:1 1 170px;background:#fff;border-radius:13px;padding:16px;border:1px solid #e0e8ef;">
<div style="font-size:16px;font-weight:800;color:#2c617f;margin-bottom:5px;">دوباره</div>
<div style="font-size:13px;color:#708091;">برای کارت‌هایی که به تمرین زودتر نیاز دارند.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 170px;background:#fff;border-radius:13px;padding:16px;border:1px solid #e0e8ef;">
<div style="font-size:16px;font-weight:800;color:#2c617f;margin-bottom:5px;">سخت</div>
<div style="font-size:13px;color:#708091;">برای پاسخ‌هایی که با دشواری به یاد آمده‌اند.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 170px;background:#fff;border-radius:13px;padding:16px;border:1px solid #e0e8ef;">
<div style="font-size:16px;font-weight:800;color:#2c617f;margin-bottom:5px;">خوب</div>
<div style="font-size:13px;color:#708091;">برای پاسخ‌هایی که به‌درستی به یاد آورده‌اید.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 170px;background:#fff;border-radius:13px;padding:16px;border:1px solid #e0e8ef;">
<div style="font-size:16px;font-weight:800;color:#2c617f;margin-bottom:5px;">آسان</div>
<div style="font-size:13px;color:#708091;">برای کارت‌هایی که پاسخ آن‌ها را به‌آسانی می‌دانید.</div>
</div>
</div>
<div style="font-size:12px;color:#718294;margin-top:15px;">
برنامه مرور بر اساس ارزیابی شما تنظیم می‌شود؛ مرور منظم می‌تواند به تثبیت آموخته‌ها کمک کند، اما به‌تنهایی تضمین‌کننده تسلط کامل نیست.
</div>
</div>
<!-- CONTENT -->
<div style="margin:30px 0;">
<div style="font-size:23px;font-weight:800;text-align:center;color:#173c5a;margin-bottom:8px;">محتوا را به شیوه‌های مختلف تمرین کنید</div>
<div style="font-size:14px;text-align:center;color:#6b7a8d;margin-bottom:20px;">
ساختار دوره‌ها متناسب با موضوع آموزشی طراحی شده است و ممکن است انواع مختلفی از محتوا را در بر بگیرد.
</div>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="box-sizing:border-box;flex:1 1 190px;padding:19px;border:1px solid #e0e7ed;border-radius:15px;">
<div style="font-size:17px;font-weight:800;color:#245d83;margin-bottom:7px;">نکته‌های ساده</div>
<div style="font-size:13px;color:#69798b;">برای مرور سریع مفاهیم اصلی و نکات کلیدی.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 190px;padding:19px;border:1px solid #e0e7ed;border-radius:15px;">
<div style="font-size:17px;font-weight:800;color:#245d83;margin-bottom:7px;">نکته‌های رسمی</div>
<div style="font-size:13px;color:#69798b;">برای تمرین تعاریف، اصطلاحات و بیان دقیق علمی.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 190px;padding:19px;border:1px solid #e0e7ed;border-radius:15px;">
<div style="font-size:17px;font-weight:800;color:#245d83;margin-bottom:7px;">کوییز</div>
<div style="font-size:13px;color:#69798b;">برای سنجش درک مطلب و بررسی گزینه صحیح.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 190px;padding:19px;border:1px solid #e0e7ed;border-radius:15px;">
<div style="font-size:17px;font-weight:800;color:#245d83;margin-bottom:7px;">پرسش و پاسخ</div>
<div style="font-size:13px;color:#69798b;">برای تمرین یادآوری و سنجش میزان تسلط بر مطالب.</div>
</div>
</div>
<div style="font-size:12px;text-align:center;color:#7b8998;margin-top:12px;">
محتوای هر دوره بر اساس ساختار و امکانات فعال همان دوره ارائه می‌شود.
</div>
</div>
<!-- WEB APP -->
<div style="box-sizing:border-box;margin:30px 0;padding:27px 24px;border-radius:20px;background:linear-gradient(145deg,#eef7f7,#f5f8fc);border:1px solid #d9e9e8;">
<div style="font-size:12px;font-weight:bold;color:#34867f;letter-spacing:1px;margin-bottom:7px;">LEARN ANYWHERE</div>
<div style="font-size:23px;font-weight:800;color:#173c5a;margin-bottom:12px;">همراه شما روی مرورگر</div>
<div style="font-size:14px;color:#566f7c;margin-bottom:18px;">
برای استفاده از نسخه تحت وب، کافی است با حساب کاربری خود وارد سامانه شوید. بدون نیاز به نصب یک برنامه اختصاصی، می‌توانید از مرورگر سازگار روی گوشی، تبلت یا رایانه به دوره‌های در دسترس خود مراجعه کنید.
</div>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="box-sizing:border-box;flex:1 1 180px;background:#fff;border-radius:12px;padding:15px;">
<div style="font-weight:bold;color:#245d65;">گوشی هوشمند</div>
<div style="font-size:12px;color:#71838c;">برای مطالعه در زمان‌های کوتاه</div>
</div>
<div style="box-sizing:border-box;flex:1 1 180px;background:#fff;border-radius:12px;padding:15px;">
<div style="font-weight:bold;color:#245d65;">تبلت و لپ‌تاپ</div>
<div style="font-size:12px;color:#71838c;">برای مطالعه و مرور راحت‌تر</div>
</div>
<div style="box-sizing:border-box;flex:1 1 180px;background:#fff;border-radius:12px;padding:15px;">
<div style="font-weight:bold;color:#245d65;">حساب کاربری شخصی</div>
<div style="font-size:12px;color:#71838c;">برای دسترسی به دوره‌های مجاز شما</div>
</div>
</div>
</div>
<!-- CERTIFICATE -->
<div style="box-sizing:border-box;margin:30px 0;padding:28px 24px;border-radius:20px;border:1px solid #dfc88d;background:linear-gradient(145deg,#fffaf0,#fffdf8);">
<div style="text-align:center;margin-bottom:18px;">
<div style="font-size:12px;letter-spacing:1px;color:#96722f;font-weight:bold;">COURSE COMPLETION CERTIFICATE</div>
<div style="font-size:25px;font-weight:800;color:#624b20;margin-top:5px;">گواهی پایان دوره؛ ثبت دستاورد شما</div>
<div style="font-size:14px;color:#786b53;margin-top:8px;">
در دوره‌هایی که امکان دریافت گواهی برای آن‌ها فعال است، می‌توانید پس از تکمیل شرایط آموزشی، درخواست گواهی پایان دوره ثبت کنید.
</div>
</div>
<div style="background:#fff;border:1px solid #eee2c5;border-radius:15px;padding:20px;">
<div style="font-size:17px;font-weight:800;color:#6d5426;margin-bottom:12px;">شرایط درخواست گواهی</div>
<div style="font-size:14px;color:#655b49;">
<div style="margin-bottom:8px;">✓ داشتن دسترسی دارای قابلیت گواهی برای دوره مربوطه.</div>
<div style="margin-bottom:8px;">✓ تکمیل اطلاعات لازم در پروفایل، شامل کد ملی معتبر، عکس پرسنلی و نام و نام خانوادگی انگلیسی.</div>
<div style="margin-bottom:8px;">✓ مشاهده تمام فلشکارتهای فعال دوره.</div>
<div>✓ قبولی در آزمون‌های پایان فصل، در صورت وجود آزمون برای فصل‌ها.</div>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:13px;margin-top:16px;">
<div style="box-sizing:border-box;flex:1 1 230px;padding:17px;background:#fff;border:1px solid #eee2c5;border-radius:13px;">
<div style="font-weight:800;color:#6d5426;margin-bottom:5px;">فارسی و انگلیسی</div>
<div style="font-size:13px;color:#746b5b;">پس از تأیید و انتشار، نسخه‌های فارسی و انگلیسی گواهی در دسترس قرار می‌گیرند.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 230px;padding:17px;background:#fff;border:1px solid #eee2c5;border-radius:13px;">
<div style="font-weight:800;color:#6d5426;margin-bottom:5px;">استعلام آنلاین</div>
<div style="font-size:13px;color:#746b5b;">گواهی منتشرشده دارای QR Code و لینک اختصاصی برای بررسی آنلاین اعتبار آن است.</div>
</div>
<div style="box-sizing:border-box;flex:1 1 230px;padding:17px;background:#fff;border:1px solid #eee2c5;border-radius:13px;">
<div style="font-weight:800;color:#6d5426;margin-bottom:5px;">دانلود و چاپ</div>
<div style="font-size:13px;color:#746b5b;">پس از انتشار گواهی، امکان دریافت نسخه PDF فارسی و انگلیسی و چاپ آن فراهم است.</div>
</div>
</div>
<div style="font-size:13px;color:#786b53;margin-top:16px;">
<strong>توجه:</strong> ثبت درخواست به معنای صدور قطعی نیست. درخواست گواهی پس از بررسی و تأیید ادمین منتشر می‌شود. این گواهی، گواهی پایان دوره آموزشی است و به‌خودی‌خود معادل مدرک دانشگاهی یا مدرک رسمی مورد تأیید نهادهای دولتی نیست.
</div>
</div>
<!-- FINAL -->
<div style="box-sizing:border-box;padding:32px 22px;text-align:center;border-radius:22px;background:linear-gradient(135deg,#11223c,#1d4b69);color:#fff;">
<div style="font-size:24px;font-weight:800;margin-bottom:10px;">یادگیری را شروع کنید؛ پیشرفت را دنبال کنید</div>
<div style="max-width:620px;margin:0 auto;font-size:14px;color:#dce8f1;">
با تمرین منظم، مرور هدفمند و پیگیری مسیر آموزشی خود، قدم‌به‌قدم دانش و مهارت‌هایتان را گسترش دهید.
</div>
<div style="margin-top:20px;display:inline-block;padding:9px 19px;border:1px solid rgba(255,255,255,.3);border-radius:30px;font-size:13px;color:#e8ca83;">
هر کارت، یک قدم به جلو
</div>
</div>
<div style="font-size:12px;text-align:center;color:#8995a4;margin-top:16px;">
امکانات محتوایی، مرور و گواهی بر اساس سطح دسترسی و تنظیمات هر دوره متفاوت است.
</div>
</div>
<div dir="rtl" style="font-family:Tahoma,Arial,sans-serif; max-width:1000px; margin:30px auto; color:#243247;">
<div style="background:linear-gradient(135deg,#101d35 0%,#203b5c 100%); border-radius:22px; padding:32px 22px; text-align:center; color:#ffffff; margin-bottom:22px; box-shadow:0 12px 32px rgba(16,29,53,0.15);">
<div style="display:inline-block; background:rgba(226,190,112,0.15); border:1px solid rgba(226,190,112,0.55); color:#f0d59a; padding:7px 16px; border-radius:30px; font-size:12px; margin-bottom:14px;">
نگاهی به محیط سامانه
</div>
<h2 style="margin:0 0 12px; font-size:25px; line-height:1.8; color:#ffffff;">
یادگیری هوشمند، قدم‌به‌قدم
</h2>
<p style="margin:0 auto; max-width:650px; font-size:14px; line-height:2.2; color:#dce6f2;">
با محیط سامانه آموزشی آشنا شوید و نمونه‌هایی از فضای یادگیری، فلش‌کارت‌ها و ابزارهای مرور و تمرین را مشاهده کنید.
</p>
<div style="width:58px; height:3px; background:#dfbd78; border-radius:5px; margin:20px auto 0;"></div>
</div>
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px;">
<a href="https://sp.express24.ir/uploads/cdn/learnova1.jpg" target="_blank" rel="noopener noreferrer" style="display:block; text-decoration:none; color:inherit; background:#ffffff; border:1px solid #e4eaf1; border-radius:18px; padding:10px; box-shadow:0 6px 20px rgba(31,49,75,0.07);">
<div style="overflow:hidden; border-radius:12px; background:#f3f6fa;">
<img src="https://sp.express24.ir/uploads/cdn/learnova1.jpg" alt="تصویر نمونه اول از سامانه آموزشی و فلش‌کارت‌ها" loading="lazy" style="display:block; width:100%; height:auto; border-radius:12px;">
</div>
<div style="padding:14px 8px 10px; text-align:center;">
<div style="font-size:15px; font-weight:bold; color:#183454; margin-bottom:6px;">محیط سامانه آموزشی</div>
<div style="font-size:12px; line-height:1.9; color:#738198;">برای مشاهده تصویر در اندازه بزرگ‌تر کلیک کنید</div>
</div>
</a>
<a href="https://sp.express24.ir/uploads/cdn/learnova2.jpg" target="_blank" rel="noopener noreferrer" style="display:block; text-decoration:none; color:inherit; background:#ffffff; border:1px solid #e4eaf1; border-radius:18px; padding:10px; box-shadow:0 6px 20px rgba(31,49,75,0.07);">
<div style="overflow:hidden; border-radius:12px; background:#f3f6fa;">
<img src="https://sp.express24.ir/uploads/cdn/learnova2.jpg" alt="تصویر نمونه دوم از سامانه آموزشی و فلش‌کارت‌ها" loading="lazy" style="display:block; width:100%; height:auto; border-radius:12px;">
</div>
<div style="padding:14px 8px 10px; text-align:center;">
<div style="font-size:15px; font-weight:bold; color:#183454; margin-bottom:6px;">یادگیری و مرور مطالب</div>
<div style="font-size:12px; line-height:1.9; color:#738198;">برای مشاهده تصویر در اندازه بزرگ‌تر کلیک کنید</div>
</div>
</a>
<a href="https://sp.express24.ir/uploads/cdn/learnova3.jpg" target="_blank" rel="noopener noreferrer" style="display:block; text-decoration:none; color:inherit; background:#ffffff; border:1px solid #e4eaf1; border-radius:18px; padding:10px; box-shadow:0 6px 20px rgba(31,49,75,0.07);">
<div style="overflow:hidden; border-radius:12px; background:#f3f6fa;">
<img src="https://sp.express24.ir/uploads/cdn/learnova3.jpg" alt="تصویر نمونه سوم از سامانه آموزشی و فلش‌کارت‌ها" loading="lazy" style="display:block; width:100%; height:auto; border-radius:12px;">
</div>
<div style="padding:14px 8px 10px; text-align:center;">
<div style="font-size:15px; font-weight:bold; color:#183454; margin-bottom:6px;">تجربه مطالعه تعاملی</div>
<div style="font-size:12px; line-height:1.9; color:#738198;">برای مشاهده تصویر در اندازه بزرگ‌تر کلیک کنید</div>
</div>
</a>
<a href="https://sp.express24.ir/uploads/cdn/learnova4.jpg" target="_blank" rel="noopener noreferrer" style="display:block; text-decoration:none; color:inherit; background:#ffffff; border:1px solid #e4eaf1; border-radius:18px; padding:10px; box-shadow:0 6px 20px rgba(31,49,75,0.07);">
<div style="overflow:hidden; border-radius:12px; background:#f3f6fa;">
<img src="https://sp.express24.ir/uploads/cdn/learnova4.jpg" alt="تصویر نمونه چهارم از سامانه آموزشی و فلش‌کارت‌ها" loading="lazy" style="display:block; width:100%; height:auto; border-radius:12px;">
</div>
<div style="padding:14px 8px 10px; text-align:center;">
<div style="font-size:15px; font-weight:bold; color:#183454; margin-bottom:6px;">امکانات بیشتر سامانه</div>
<div style="font-size:12px; line-height:1.9; color:#738198;">برای مشاهده تصویر در اندازه بزرگ‌تر کلیک کنید</div>
</div>
</a>
</div>
<div style="margin-top:22px; padding:18px 20px; background:#f5f8fc; border:1px solid #e3eaf3; border-right:4px solid #d2ae67; border-radius:12px; text-align:center;">
<p style="margin:0; color:#52647b; font-size:13px; line-height:2.2;">
<strong style="color:#203b5c;">یادگیری فراتر از مطالعه معمولی</strong><br>
با فلشکارتهای آموزشی، مرور هدفمند و تمرین مستمر، مطالب را فعالانه یاد بگیرید و مسیر پیشرفت خود را دنبال کنید.
</p>
</div>
</div>
</section>
<div class="flex flex-wrap items-center gap-2 mb-4 text-sm">
<span class="text-gray-500">تگ‌ها:</span>
<a href="/product-tag/api" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">API</a>
<a href="/product-tag/api-%d9%86%d9%88%db%8c%d8%b3%db%8c" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">API نویسی</a>
<a href="/product-tag/backend" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">Backend</a>
<a href="/product-tag/e-learning" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">E-learning</a>
<a href="/product-tag/express-js-%d8%a2%d9%85%d9%88%d8%b2%d8%b4" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">Express js آموزش</a>
<a href="/product-tag/express-js" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">Express.js</a>
<a href="/product-tag/node-js" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">Node.js</a>
<a href="/product-tag/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a7%da%a9%d8%b3%d9%be%d8%b1%d8%b3" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">آموزش اکسپرس</a>
<a href="/product-tag/%d8%a7%da%a9%d8%b3%d9%be%d8%b1%d8%b3" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">اکسپرس</a>
<a href="/product-tag/%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%86%d9%88%db%8c%d8%b3%db%8c" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">برنامه نویسی</a>
<a href="/product-tag/%d8%a8%da%a9-%d8%a7%d9%86%d8%af" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">بک اند</a>
<a href="/product-tag/%d9%be%d9%84%d8%aa%d9%81%d8%b1%d9%85-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a2%d9%86%d9%84%d8%a7%db%8c%d9%86" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">پلتفرم آموزش آنلاین</a>
<a href="/product-tag/%d8%aa%d9%88%d8%b3%d8%b9%d9%87-%d9%88%d8%a8" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">توسعه وب</a>
<a href="/product-tag/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b3%db%8c%d8%b3%d8%aa%d9%85-%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%a2%d9%86%d9%84%d8%a7%db%8c%d9%86" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">ساخت سیستم آموزش آنلاین</a>
<a href="/product-tag/%d9%86%d9%88%d8%af-%d8%ac%db%8c-%d8%a7%d8%b3" class="inline-block px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700">نود جی اس</a>
</div>
<section id="reviews" class="woocommerce-Reviews mt-16">
<h2 class="woocommerce-Reviews-title text-2xl font-bold mb-6">نظرات</h2>
<p class="woocommerce-noreviews text-gray-500">هنوز نظری ثبت نشده است.</p>
<p class="mt-6"><a href="/login" class="text-primary">وارد شوید</a> تا نظر ثبت کنید.</p>
</section>
</main>
<footer class="bg-gray-900 text-gray-300 mt-auto">
<div class="container mx-auto px-4 py-8 space-y-8">
<div class="footer-row grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="footer-column space-y-4">
<div class="footer-module">
<h4 class="text-white font-semibold mb-3">MAPress</h4>
<div class="footer-module-body"><a href="https://24times.ir/">مجله 24 تایمز</a>
<br />
<a href="https://talarjamejam.ir">تالار ختم</a></div>
</div>
</div>
<div class="footer-column space-y-4">
<div class="footer-module">
<h4 class="text-white font-semibold mb-3">دسترسی سریع</h4>
<div class="footer-module-body"><ul class="space-y-2 text-sm"><li><a href="/shop" class="text-gray-200 hover:text-white transition-colors">فروشگاه</a></li><li><a href="/categories" class="text-gray-200 hover:text-white transition-colors">دسته‌بندی‌ها</a></li><li><a href="/blog" class="text-gray-200 hover:text-white transition-colors">وبلاگ</a></li></ul></div>
</div>
</div>
<div class="footer-column space-y-4">
<div class="footer-module">
<h4 class="text-white font-semibold mb-3">نماد</h4>
<div class="footer-module-body"><a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=22928&Code=lI9NBguCNyRimkdy9DczLabUuPirp1D9'><img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=22928&Code=lI9NBguCNyRimkdy9DczLabUuPirp1D9' alt='' style='cursor:pointer' code='lI9NBguCNyRimkdy9DczLabUuPirp1D9'></a></div>
</div>
</div>
</div>
<div class="border-t border-gray-800 pt-6 text-center text-sm">
© 2026 اکسپرس 24. تمامی حقوق محفوظ است.
</div>
</div>
</footer>
<script>
window.MAPRESS_SEARCH = {
apiUrl: "\/api\/search",
resultsUrl: "\/search",
debounceMs: 300,
minChars: 2,
loadingText: 'در حال جستجو…',
noResultsText: 'نتیجه‌ای یافت نشد',
seeAllText: 'مشاهده همه نتایج'
};
</script>
<script src="/assets/search.js" defer></script>
<script>
window.MAPRESS_ANALYTICS = {
collectUrl: "\/analytics\/collect"
};
</script>
<script src="/assets/analytics.js" defer></script>
<script>
(function () {
var form = document.getElementById('product-add-form');
if (!form) return;
var widget = document.getElementById('installment-widget');
var titleEl = widget ? widget.querySelector('[data-installment-title]') : null;
var descEl = widget ? widget.querySelector('[data-installment-desc]') : null;
var titleWithAmount = widget ? (widget.getAttribute('data-title-with-amount') || 'در صورت خرید اقساطی هر قسط: __AMOUNT__') : '';
var titleGeneric = widget ? (widget.getAttribute('data-title-generic') || 'در صورت خرید اقساطی امکان قسط‌بندی برحسب اعتبار') : '';
var fallbackDesc = widget ? (widget.getAttribute('data-description') || '۴ قسط ماهانه. بدون سود، چک و ضامن.') : '';
var MIN_AMOUNT = 5000;
var MAX_AMOUNT = 50000000;
var SHOW_AMOUNT_THRESHOLD = 5000000;
var MONTHS = 4;
function formatPrice(amount) {
var n = Math.max(0, Math.round(amount));
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' تومان';
}
function installmentTitle(total) {
if (total < MIN_AMOUNT || total > MAX_AMOUNT) {
return null;
}
if (total < SHOW_AMOUNT_THRESHOLD) {
var per = Math.ceil(total / MONTHS);
return titleWithAmount.replace('__AMOUNT__', formatPrice(per));
}
return titleGeneric;
}
function selectedPlanIndex() {
var radio = form.querySelector('.sku-plan-radio:checked');
return radio ? radio.value : null;
}
function syncAddonVisibility() {
var selected = selectedPlanIndex();
form.querySelectorAll('[data-plan-addons]').forEach(function (box) {
var planIndex = box.getAttribute('data-plan-index');
var active = planIndex === selected;
box.classList.toggle('hidden', !active);
box.querySelectorAll('.sku-addon-checkbox').forEach(function (cb) {
cb.disabled = !active;
if (!active) {
cb.checked = false;
}
});
});
}
function addonTotalForPlan(planIndex) {
var total = 0;
form.querySelectorAll('.sku-addon-checkbox[data-plan-index="' + planIndex + '"]:checked').forEach(function (cb) {
total += parseInt(cb.getAttribute('data-addon-price') || '0', 10) || 0;
});
return total;
}
function syncPricesAndInstallment() {
var radio = form.querySelector('.sku-plan-radio:checked');
if (!radio) return;
var planIndex = radio.value;
var base = parseInt(radio.getAttribute('data-base-price') || '0', 10) || 0;
var total = base + addonTotalForPlan(planIndex);
form.querySelectorAll('[data-plan-block]').forEach(function (block) {
var idx = block.getAttribute('data-plan-index');
var blockRadio = block.querySelector('.sku-plan-radio');
var badge = block.querySelector('[data-plan-price-badge]');
if (!blockRadio || !badge) return;
var blockBase = parseInt(blockRadio.getAttribute('data-base-price') || '0', 10) || 0;
var blockTotal = idx === planIndex ? (blockBase + addonTotalForPlan(idx)) : blockBase;
badge.textContent = formatPrice(blockTotal);
var label = block.querySelector('[data-plan-installment-label]');
if (label) {
var title = installmentTitle(blockTotal);
if (title) {
label.textContent = title;
label.parentElement.classList.remove('hidden');
} else {
label.parentElement.classList.add('hidden');
}
}
});
if (widget && titleEl) {
var title = installmentTitle(total);
if (title) {
widget.classList.remove('hidden');
titleEl.textContent = title;
if (descEl) descEl.textContent = fallbackDesc;
} else {
widget.classList.add('hidden');
}
}
}
function syncAll() {
syncAddonVisibility();
syncPricesAndInstallment();
}
form.querySelectorAll('.sku-plan-radio').forEach(function (radio) {
radio.addEventListener('change', syncAll);
});
form.querySelectorAll('.sku-addon-checkbox').forEach(function (cb) {
cb.addEventListener('change', syncPricesAndInstallment);
});
syncAll();
})();
</script>
</body>
</html>
📚 اطلاعات دوره
عنوان دوره: ساخت سیستم های E-learning Platform Backend با اکسپرس.js موضوع کلی: برنامه نویسی موضوع میانی: اکسپرس (Express.js)📋 سرفصل‌های دوره (100 موضوع)