تاریخ شمسی برای blogger !
کار بسیار عالی انجام دادید، تا حالا نمونه ساخته شده با jquery را ندیده بودم.
https://github.com/MehdiSaeedifar/IrisStore
همچنین نمونهی آنلاین آنرا میتوانید در فروشگاه آیریس مشاهده کنید.
در ادامه برخی از قابلیتهای این سیستم را مشاهده میکنید:
جست و جو با قابلیت دسته بندی نتایج
به هنگام جست و جو، لیستی از موارد پیشنهادی به صورت دسته بندی شده نمایش داده میشود.
جست و جوی پیشرفته کالاها
جست و جو بر اساس قیمت، گروه، کلمات کلیدی و مرتب سازی نتایج انجام میگیرد. همچنین نتایج جست و جو بدون رفرش شدن صفحه و به صورت AJAX ای به همراه تغییر URL صفحه صورت میگیرد.
نمایش نمودار تغییرات قیمت
امکان نمایش نمودار تغییرات قیمت کالا در بازهی زمانی نیز پیش بینی شده است.
ویرایش اطلاعات به صورت inline
امکان ویرایش قیمت و تاریخ به صورت inline وجود دارد.
مدیریت تصاویر کالا
در این قسمت امکان آپلود همزمان چندین فایل به همراه پیش نمایش آنها وجود دارد. همچنین امکان کشیدن و رها کردن برای تغییر ترتیب چیدمان عکسها نیز مهیا است.( تصویر اول به عنوان کاور کالا در نظر گرفته میشود.)
قابلیتهای دیگر:
- مدیریت تصاویر اسلایدشو و تغییر ترتیب آنها از طریق کشیدن و رها کردن (drag & drop)
- تعریف برگه و تغییر ترتیب نمایش آنها از طریق کشیدن و رها کردن
- امکان ارسال پست
- تعریف دسته بندی
- مدیریت کاربران
- تعریف تنظیمات سایت
- نمایش کالا و پستهای مشابه
کارهایی که باید انجام شود:
- پیاده سازی سبد خرید و خرید آنلاین
تصویر پنل مدیریت
تصویر صفحهی اصلی:
همچنین به راحتی میتوان با طراحی قالب جدیدی، از این سیستم برای کاری غیر از فروشگاه اینترنتی استفاده کرد؛ سایتهای زیر نمونههای آنلاین دیگری از این سیستم هستند:
- http://www.petrapars.ir
- http://www.ava-tarh.ir
در نهایت فهرستی از کتاب خانهها و فناوریهای استفاده شده و همچنین مقالات مرتبط با این پروژه را قرار دادهام.
کتابخانهها و فریم ورکهای سمت سرور:
فناوری یا کتابخانه | توضیحات | مقالات مرتبط |
Bootstrap 3.x | فریم ورک پایه ای css سایت | - Bootstrap 3 RTL Theme - Twitter Bootstrap -سازگارسازی کلاسهای اعتبارسنجی Twitter Bootstrap 3 با فرمهای ASP.NET MVC -ساخت قالبهای نمایشی و ادیتور دکمه سه وضعیتی سازگار با Twitter bootstrap در ASP.NET MVC -نمایش اخطارها و پیامهای بوت استرپ به کمک TempData در ASP.NET MVC |
AdminLTE | قالب مدیریت سایت | - نسخه راستچین شده AdminLTE 2.2.1 |
Animate.css | انیمیشنهای css3 سایت | |
Font Awesome | پک آیکونهای برداری | |
Awesome Bootstrap Checkbox | زیبا سازی چک باکس ها | |
فونت فارسی وزیر | قلم فارسی | |
لطفا برای طرح سؤالات و پیشنهادات خود و جهت مدیریت بهتر آنها، از قسمت اختصاصی این پروژه در سایت استفاده نمائید.
فروشگاه IrisStore
https://github.com/MehdiSaeedifar/IrisStore
همچنین نمونهی آنلاین آنرا میتوانید در فروشگاه آیریس مشاهده کنید.
در ادامه برخی از قابلیتهای این سیستم را مشاهده میکنید:
جست و جو با قابلیت دسته بندی نتایج
به هنگام جست و جو، لیستی از موارد پیشنهادی به صورت دسته بندی شده نمایش داده میشود.
جست و جوی پیشرفته کالاها
جست و جو بر اساس قیمت، گروه، کلمات کلیدی و مرتب سازی نتایج انجام میگیرد. همچنین نتایج جست و جو بدون رفرش شدن صفحه و به صورت AJAX ای به همراه تغییر URL صفحه صورت میگیرد.
نمایش نمودار تغییرات قیمت
امکان نمایش نمودار تغییرات قیمت کالا در بازهی زمانی نیز پیش بینی شده است.
ویرایش اطلاعات به صورت inline
امکان ویرایش قیمت و تاریخ به صورت inline وجود دارد.
مدیریت تصاویر کالا
در این قسمت امکان آپلود همزمان چندین فایل به همراه پیش نمایش آنها وجود دارد. همچنین امکان کشیدن و رها کردن برای تغییر ترتیب چیدمان عکسها نیز مهیا است.( تصویر اول به عنوان کاور کالا در نظر گرفته میشود.)
قابلیتهای دیگر:
- مدیریت تصاویر اسلایدشو و تغییر ترتیب آنها از طریق کشیدن و رها کردن (drag & drop)
- تعریف برگه و تغییر ترتیب نمایش آنها از طریق کشیدن و رها کردن
- امکان ارسال پست
- تعریف دسته بندی
- مدیریت کاربران
- تعریف تنظیمات سایت
- نمایش کالا و پستهای مشابه
تصویر پنل مدیریت
تصویر صفحهی اصلی:
همچنین به راحتی میتوان با طراحی قالب جدیدی، از این سیستم برای کاری غیر از فروشگاه اینترنتی استفاده کرد؛ سایتهای زیر نمونههای آنلاین دیگری از این سیستم هستند:
- http://www.petrapars.ir
- http://www.ava-tarh.ir
در نهایت فهرستی از کتاب خانهها و فناوریهای استفاده شده و همچنین مقالات مرتبط با این پروژه را قرار دادهام.
کتابخانهها و فریم ورکهای سمت سرور:
فریمورکهای CSS:
فناوری یا کتابخانه | توضیحات | مقالات مرتبط |
Bootstrap 3.x | فریم ورک پایه ای css سایت | - Bootstrap 3 RTL Theme - Twitter Bootstrap -سازگارسازی کلاسهای اعتبارسنجی Twitter Bootstrap 3 با فرمهای ASP.NET MVC -ساخت قالبهای نمایشی و ادیتور دکمه سه وضعیتی سازگار با Twitter bootstrap در ASP.NET MVC -نمایش اخطارها و پیامهای بوت استرپ به کمک TempData در ASP.NET MVC |
AdminLTE | قالب مدیریت سایت | - نسخه راستچین شده AdminLTE 2.2.1 |
Animate.css | انیمیشنهای css3 سایت | |
Font Awesome | پک آیکونهای برداری | |
Awesome Bootstrap Checkbox | زیبا سازی چک باکس ها | |
فونت فارسی وزیر | قلم فارسی | |
آموزش Knockout.Js #1
در یک جمله Knockout.Js یک فریم ورک جاوا اسکریپ است که امکان پیاده سازی الگوی MVVM و مکانیزم data-binding را در پروژههای تحت وب به راحتی میسر میکند. به عبارت دیگر عناصر DOM را به data-model و آبجکتهای data-model را به عناصر DOM مقید میکند، به طوری که با هر تغییر در مقدار یا وضعیت این عناصر یا آبجکت ها، تغییرات به موارد مقید شده نیز اعمال میگردد. به تصاویر زیر دقت کنید!
به روز رسانی data-model بدون استفاده از KO
به روز رسانی data-model با استفاده از KO
ویژگیهای مهم KO
»ارائه یک راه حل بسیار ساده و واضح برای اتصال بخشهای مختلف UI به data-model
»به روز رسانی خودکار عناصر و بخشهای مختلف UI بر اساس تغییرات صورت گرفته در data-model
»به صورت کامل با کتابخانه و توابع javascript پیاده سازی شده است.
»حجم بسیار کم(سیزده کیلو بایت) بعد از فشرده سازی
»سازگار با تمام مروگرهای جدید(... ,IE 6+, Firefox 2+, Chrome, Safari )
»امکان استفاده راحت بدون اعمال تغییرات اساسی در معماری پروژه هایی که در فاز توسعه هستند و بخشی از مسیر توسعه را طی کرده اند
»و...
آیا KO برای تکمیل JQuery در نظر گرفته شده است یا جایگزین؟
»به دست آوردن تعداد divهای موجود با استفاده از یک کلاس مشخص css؛
» یا حتی به دست آوردن تعداد آیتمهای نمایشی در span هایی مشخص.
و البته سایر راه حل ها...
حال فرض کنید دکمههای دیگر نظیر Delete نیز مد نظر باشد که مراحل بالا تکرار خواهند شد. اما با استفاده از KO به راحتی میتوانیم تعداد آیتمهای موجود در یک آرایه را به یک عنصر مشخص bind کنیم به طور با هر تغییر در این مقدار، عنصر مورد نظر نیز به روز میشود یا به بیانی دیگر همواره تغییرات observe خواهند شد. برای مثال:
Number of items :<span data-bind="text: myList().count"></span>
در پست بعد، شروع به کار با KO آموزش داده خواهد شد.
ادامه دارد...
مزیت آن این است که شما با Razor فقط یک سری فرمهای ابتدایی و اعتبارسنجی آنها را به خوبی میتوانید مدیریت کنید. یک مقدار کار UI که پیچیدهتر شد، به صفحهای میرسید که درون آن 100ها سطر کد جیکوئری با کدهای Razor مخلوط شدن و 2 ماه بعد حتی جرات نمیکنید به این صفحه دست بزنید و تغییری را در آن اعمال کنید. اینجا است که فریم ورکهای SPA ارزش خودشان را نشان میدهند.
برای فرمهای معمولی، Razor عالی است. برای UI پیچیده، ترکیب Razor و jQuery اصلا قابلیت نگهداری ندارد (صفحاتی پر از قطعات جاوا اسکریپت که نه فضای نامی دارند، به راحتی تداخل میکنند، عموما از TypeScript استفاده نمیکنند و مبتنی بر قابلیتهای جدید این زبان نیستند). در یک چنین حالتی قابلیت تست UI را هم از دست خواهید داد. همچنین مدام هم محدود به افزونههای جیکوئری خواهید بود، اما با فریم ورکهای SPA، خیلی از این افزونهها، کارهای معمولی آنها هستند. به علاوه زمانیکه back-end (سمت سرور) و front-end (مدیریت کدهای سمت کلاینت) را از هم جدا میکنید، بهتر میتوانید از مزیت کار با طراحان UI استفاده کنید. کسانیکه عموما قرار نیست با کدهای سمت سرور کار کنند.
ASP.NET MVC #24
ASP.NET MVC 4 نسبت به نگارش 3 آن، آنچنان تغییرات اساسی را به همراه ندارد. یک سری افزونه جدید دارد جهت فشرده سازی اسکریپتها و cssها، اندکی بهبود Razor و یک سری مسایل امنیتی که من لابلای همین سری به آنها اشاره داشتم و ... از این نوع مباحث + مبحث Web API رو اضافه کردن که به نوعی ترکیب WCF با ASP.NET MVC است به نحوی شکیل!
البته مجوز نگارش 4 بتای آن که در دسترس هست، Go live است یعنی میتونید همین الان در محیط کار ازش استفاده کنید. هر زمان که نگارش نهایی آن آمد من یک سری ارتقاء به MVC4 رو اضافه خواهم کرد.
مابقی مسایل هم بیشتر تکنیک است تا مباحث پایه. مثلا تکنیکهای استفاده از jQuery UI در ASP.NET MVC یا استفاده از Kendo UI در ASP.NET MVC و موارد مشابه.
برخی از امکاناتی که تقویمهای مشابه دارند که اگر در این تقویم هم پیش بینی شود بهتر است.
تقویم با jQuery به فرموده آقای یوسفی : محدود کردن انتخاب تاریخ
یا تقویم ترجمه آقای هاشمی نژاد : انتخاب تاریخهای محدود بین دو تاریخ
بنده میخواستم نظرم را به عنوان بازخورد ثبت کنم ولی فکر کردم اینجا ثبت کنم بهتره
اینکه datepicker رو به datetimepicker تبدیل کنیم
بتوانیم یک نمونه یا راهنمای توسعه برای همکاران جهت ادامه راه پرارزش شما ارائه دهیم.
محصول را با برخی از ابزارهای معروف مانند KENDO UI یا Telerik که مصرف کنندگان بسیار زیادی دارند مقایسه کنیم و امکاناتشان را در کنار هم تشریح کنیم
Helper AjaxDialog چطوری کار میکنه؟
حاصل جستجوی اینها در کل پروژه مانند Ajax.LinkDialog و Ajax.ButtonDialog فایلهای استفاده شده را مشخص میکنند. مثالهای استفاده را در این فایلها پیدا کنید. پیشنیاز آن که jQuery UI Dialog هست پیشتر عنوان شد و باید به پروژه شما اضافه شود. نحوهی استفاده نهایی از این متدهای کمکی در فایل adminjs.js وجود دارد.
Find all "Ajax.ButtonDialog", Subfolders, Find Results 1, Entire Solution, "" Matching lines: 20 Matching files: 10 Total files searched: 750