فیلم آموزش ساخت فروشگاه اینترنتی (درس 1 تا 35)

آموزش طراحی قالب سایت فروشگاهی

در بخش سوم،به آموزش ساخت منوی کشویی خواهیم پرداخت.در این بخش خواهیم دید:
1) آشنایی با تگ ul و تگ li جهت ایجاد منوی کشویی
2) آموزش استایل دهی به تگ های li جهت چینش مناسب به شکل منوی افقی
3) درج آیکون های اختصاصی در کنار هر آیتم از منوی کشویی
4) آشنایی با دستورات list-style ، direction و مروری بر دستور کاربردی float
5) مروری دیگر بر دستور background و تنظیم محل قرار گیری background با استفاده از background-position
6) آموزش تنظیم فونت با CSS و دستورات font-size ، font-family و ..
و...

آموزش طراحی قالب سایت فروشگاهی

بخش چهارم،ادامه ساخت منوی کشویی افقی بازشو می باشد.
در این بخش ،خواهیم دید که چگونه می توان برای هر منو،زیرمنوهایی را ایجاد کرد.آموزش های این بخش:
1)استفاده از تگ های تو در توی ul و li جهت ایجاد زیرلیست
2)استایل دهی مناسب به زیرمنوها
3)آشنایی با مفهوم position و دو نوع absolute و relative در CSS
- یکی از مفاهیم بسیار کاربردی و مهم در طراحی سایت ،آموزش position های مختلف می باشد.در این بخش با دونوع مهم از position ها در CSS آشنا خواهیم شد.(absolute&relative)

آموزش طراحی قالب سایت فروشگاهی

در بخش پنجم،به ادامه ساخت منوی کشویی بازشو خواهیم پرداخت.در این قسمت به شروع کار با JQUERY خواهیم پرداخت.
جی کوئری(JQUERY) یکی از رایج ترین و محبوب ترین فریم ورک های جاوااسکریپت می باشد که به کمک آن می توان اقداماتی از قبیل ساخت اسلایدشو،ساخت منوی بازشو،افکت متن و تصاویر، ایجاد انیمیشن های حرکتی و ... را انجام داد.
1) معرفی جی کوئری و نحوه الحاق پلاگین به صفحه html
2)نحوه فراخوانی فایل خارجی با استفاده از دستور include در PHP
3) آموزش تابع hover در جی کوئری
4) آموزش دستور slideDown در جی کوئری
5) آموزش تابع find در JQUERY
6) آموزش تغییر CSS با استفاده از JQUERY
و...

آموزش طراحی قالب سایت فروشگاهی

در بخش ششم،ادامه آموزش ساخت منوی کشویی را دنبال می کنیم.مباحث این بخش :
1) آموزش تابع mouseleave در جی کوئری 
-این تابع (رویداد) ،زمانی استفاده می شود که قصد داریم دستوراتی را به هنگام خروج ماوس از سلکتور مورد نظر اجرا نماییم.
2) آموزش slideUp در جی کوئری و کاربرد آن در طراحی منوی بازشو
3)تغییر رنگ آیکون ها به هنگام قرارگیری ماوس روی هر منو با استفاده از تابع css در جی کوئری
و...

آموزش طراحی قالب سایت فروشگاهی

در این بخش،به ادامه آموزش ساخت قالب می پردازیم.

1) آموزش و آشنایی با ابزار خط کش در فایرفاکس

-با یکی از افزونه های کاربردی فایرفاکس جهت اندازه گیری عناصر و بخش های مختلف قالب طراحی شده،آشنا خواهیم شد.

2) مروری بر نحوه قراردادن عنصری از قالب،در وسط صفحه (در رزلوشن ها و عرض های مختلف) به کمک دستورات CSS

3)مروری بر دستور border و تنظیم کادر عناصر html

4) اضافه کردن بخش های زیر به قالب سایت:

- دکمه ورود به سایت

- دکمه ثبت نام در سایت

5) مروری بر استفاده از آیکون ها با استفاده از سایت flaticon

و...

آموزش طراحی قالب سایت فروشگاهی

در بخش هشتم،همچنان به ادامه ساخت قالب سایت فروشگاه،می پردازیم.آنچه در این بخش فراخواهیم گرفت:
1) تشریح دقیق دستور direction و تاثیر آن بر عناصر موجود در قالب
2)آموزش خصوصیت vertical-align
3) دستور font-weight در CSS
4) مروری بر دستور border-radius جهت زاویه دادن به اطراف کادر
5) آموزش مفهوم overflow در CSS
6) آموزش تگ form و شروع کار با فرم ها در html
7) آموزش تگ input در html
8)آموزش input با type های text وsubmit و کاربرد هریک
9) مثالی دیگر از افزونه فایرباگ که یکی از اساسی ترین و کاربردی ترین موارد در طراحی سایت می باشد.
و...

آموزش طراحی قالب سایت فروشگاهی

موضوع این بخش : طراحی اسلایدشو تصاویر در فروشگاه.آنچه می آموزیم:
1)ایجاد بخشی در زیر منوی کشویی طراحی شده،جهت درج اسلایدر
2) استایل دهی مناسب به تگ div دربرگیرنده اسلایدر
3) کار با خصوصیت id در html
4)افزودن تگ های img به تگ اسلایدر و استایل دهی آن ها با استفاده از css جهت آماده سازی اسلایدر
- توجه فرمایید که در این بخش،کدهای html و css مربوط به اسلایدر را انجام خواهیم داد و در بخش های بعد،با استفاده از جی کوئری،اسلایدر را تکمیل خواهیم نمود.
این بخش،تمرینی بر مباحث جلسات قبل می باشد.

آموزش طراحی قالب سایت فروشگاهی

در بخش قبل،قالب اسلایدشو را طراحی نمودیم. و اما در این بخش خواهیم دید که یک اسلایدر را واقعا چگونه باید طراحی نمود؟آنچه می آموزیم:
1) معرفی پلاگین cycle 
-پلاگین cycle یکی از محبوب ترین و ساده ترین پلاگین های جی کوئری برای ایجاد عناصر متحرک به صورت اسلایدر،در صفحات html محسوب می گردد.
در این بخش به معرفی کامل این پلاگین و نمایش دموهای مختلفی از این پلاگین می پردازیم.
2)الحاق پلاگین فوق به صفحه html
3) نوشتن دستورات JQUERY لازم جهت استفاده از این پلاگین
4) نحوه تعیین افکت حرکتی اسلایدشو (زوم،اسکرول و...)
5) ایجاد دکمه های next و previous جهت کنترب اسلایدر توسط کاربر
6) آموزش دستور z-index در CSS
7) کار با فوتوشاپ و آشنایی بیشتر با این نرم افزار گرافیکی
- هرچند یک طراح وب،لزوما گرافیست نیست،اما لازمه کار یک طراح وب حرفه ای،بی شک،آشنایی با ابزارهایی چون فوتوشاپ می باشد.
8) آموزش تعیین فاصله زمانی بین تصاویر اسلایدشو
9)نحوه معرفی دکمه های next و previuos به پلاگین cycle
و...

آموزش طراحی قالب سایت فروشگاهی

در بخش یازدهم،به تکمیل و تمرین بشتر بر روی اسلایدشو ساخته شده می پردازیم.آنچه می بینیم:
1) نحوه مخفی کردن دکمه های کنترلی اسلایدشو و ظاهرکردن آنها هنگام قرارگیری ماوس روی اسلایدر
2) نحوه استفاده از opacity برای محو کردن و سپس نمایش دکمه های کنترلی اسلایدر با function های دوگانه hover
3) آشنایی با animate برای حرکات انیمیشنی در jquery و تغییر opacity دکمه های کنترلی در مدت زمان خاص مشخص شده در دستور animate
4) ایجاد تگ جدید div برای بخش جدیدترین کالاها
5) کاربردها و مثال هایی از دستورات width،background،float،,list-style و ... در css برای استایل دهی به بخش های موجود
6) استفاده از تگ ul و li برای نمایش جدیدترین محصولات و هم چنین یادگیری نحوه استایل دهی به این المان ها
7) کاربردهایی از دستورات direction و text-align برای راست چین کردن نوشته ها
8) تنظیمات مربوط به حاشیه های و margin ها
9) کار با تگ h2 و ایجاد عنوان بخش جدیدترین کالاها به همراه یک عکس در کنار عنوان با کمک تگ img

آموزش طراحی قالب سایت فروشگاهی

در بخش دوازدهم،برآنچه که تا کنون آموخته ایم،مروری خواهیم داشت.
1)ایجاد بخشی جدید در قالب فروشگاه،تحت عنوان کالاهای پیشنهادی
2) تمرینی بر دستور padding جهت ایجاد حاشیه داخلی
3) استایل دهی به بخش فوق با استفاده از دستورات css
4) ایجاد تگ h2 جهت نمایش عنوان مربوط به کالاهای پیشنهادی
5) مثال هایی دیگر از دستورات float جهت نمایش المان ها در یک ردیف در کنار یکدیگرو هم چنین بحث پیرامون مشکلات احتمالی این دستور
6) عیب یابی کدنویسی قالب و رفع مشکل با استفاده از فایرباگ (firebug)
7) ایجاد زیرخط زیبا و گرافیکی جهت جدا کردن عنوان از بخش های درون کالاهای پیشنهادی
8) مثالی دیگر از دستور box-shadow برای ایجاد سایه در اطراف یک المان
9) کار با دستور list-style و نحوه حذف نقاط توپر سیاه رنگ کنار تگ های li
10) کاربردی دیگر از دستور direction و مشخص نمودن جهت شروع کدنویسی html
11) استایل دهی به تگ ul و li های درون آن و هم چنین مشخص نمودن padding یا همان حاشیه داخلی و هم چنین سایر دستورات css افزودن به سبد

آموزش طراحی قالب سایت فروشگاهی

در بخش سیزدهم،بخش جدیدی تحت عنوان پروفروش ترین محصولات را به قالب فروشگاه اضافه می نماییم.
آنچه می بینیم:
1) ایجاد بخش پرفروش ترین ها و تبدیل آن به چهارستون مساوی در html با استفاده از دستورات CSS
2) درج تصاویر مربوط به پرفروش ترین محصولات به همراه عنوان و توضیحات محصول در کنار یکدیگر
3) نمایش وضعیت موجود بودن یا نبودن محصول
4) آموزش چیدن چندین عنصر در یک ردیف در html با کمک گرفتن از css

آموزش طراحی قالب سایت فروشگاهی

در چهاردهمین قسمت از این مجموعه آموزشی، قصد داریم سه بخش دیگر با عنوان اضافه به سبد خرید،توضیحات محصول،محصولات مشابه را برای هر محصول طراحی کنیم.هنگامی که کاربر موس خود را روی یکی از محصولات قرار دهد سه گزینه فوق به کاربر نمایش داده می شود.
در این بخش خواهیم دید:
1) ایجاد div جدید با id برابر با tozihat جهت نمایش سه مورد فوق
2) کاربردی دیگر از position از نوع absolute و بررسی دقیق مفهوم و کاربرد آن در کدنویسی
3) چگونگی افزودن یک بخش به داخل بخش دیگر بدون به هم ریختن و جابه جا شدن سایر اجزای موجود در آن بخش
4) نحوه قرارگیری یک المان یا بخش دقیقا در وسط بخش دیگر با استفاده از css
5) کار با دستور line-height در css و تنظیم موقعیت محتوای درون یک بخش بدون جابه جایی کل بخش
و...

آموزش طراحی قالب سایت فروشگاهی

در پانزدهمین بخش از مجموعه آموزشی طراحی فروشگاه اینترنتی بازهم به سراغ پلاگین جی کوئری خواهیم رفت و با سلکتور و event که دو مفهوم اساسی در کدنویسی جی کوئری هستندبیشتر آشنا خواهیم شد.
آنچه در این بخش خواهیم آموخت:
1) یادآوری در ارتباط با نحوه الحاق پلاگین جی کوئری به صفحه
2) بررسی نکاتی در رابطه با نحوه افزایش سرعت لود سایت و جلوگیری از کند شدن سایت
3) توضیح دقیق دستور hover در جی کوئری و کار با دو تابع موجود در این دستور
4) بررسی مفهوم this در جی کوئری
5) کار با دستور find در جی کوئری برای یافتن یک بخش درون بخشی دیگر
6) کار با animate جهت انجام دستورات css و به عنوان نمونه opacity یک بخش به صورت انیمیشنی
7) مقایسه animate با css در جی کوئری و بررسی تفاوت های آنها
8) کار با دستور addClass در جی کوئری برای افزودن کلاس به یک المان
9) کار با دستور removeClass جهت حذف class از یک المان
10) نحوه افزودن یا حذف یک استایل از جمله box-shadow مربوط به یک بخش مشخص
11) کاربردی از important در دستورات css و بررسی مفهوم آن

آموزش طراحی قالب سایت فروشگاهی

در بخش شانزدهم طراحی فروشگاه اینترنتی به یکی از مفاهیم ساده اما بسیار کاربردی در طراحی وب سایت و انجام پروژه های برنامه نویسی تحت وب خواهیم پرداخت.مفهوم masterpage نه تنها در php بلکه در هر زبان برنامه نویسی دیگری نیز کاربرد فراوانی دارد.
استفاده ازین مفهوم،چند مزیت بسیار بزرگ دارد: نخست آنکه اگر بخشی مشترک در صفحات وب سایت وجود داشته باشد نیازی نیست که کدهای مربوط به آن بخش را در تمامی صفحات بنویسیم و یا آن کدهای طولانی را کپی کنیم.
2) دوما آنکه اگر بعدها بخواهیم تغییری را در آن قسمت ایجاد کنیم نیازی نیست که در تک تک آن صفحات اصلاحاتی را ایجاد کنیم، بلکه با استفاده از مفهوم بسیار کاربردی مستر پیج می توان تنها با یک بار تغییر این تغییرات را در تمامی صفحات به صورت خودکاراعمال کرد.
3) صفحات سایت بسیار خلوت تر شده و کار کردن با آنها ساده تر می گردد و از سردر گم شدن طراح جلوگیری می نماید.
4) با استفاده از مسترپیج به سادگی قادر خواهید بود که کدهای css مشترک در تمام صفحات را تنها با یکبار نوشتن در تمامی صفحات اعمال نمایید،
به عنوان مثال فرض کنید که در تمامی صفحات قصد دارید دستور css به صورت زیر اعمال کنید:
img{border:none;}
بدون استفاده از مسترپیج ناچاریم که در تمامی صفحاتی که طراحی کرده ایم این دستور را بنویسیم، اما به کمک مستر پیج می توان با استفاده از یک بخش مشترک در صفحات طراحی شده، فقط یکبار این دستور را بنویسیم و در تمامی صفحات آن را اجرا نماییم.
5) در مورد فراخوانی پلاگین هایی نظیر جی کوئری یا صفحات css خارجی نیز این توضیحات صادق است، بدین معنی که اگر قصد دارید یک فایل css خارجی را به تمامی صفحات الحاق کنید یا آنکه یک فایل جاوااسکریپت یا پلاگینی را به تمام صفحات الحاق کنید با استفاده از مسترپیج کار بسیار ساده تر و سریع تر خواهد بود.

آموزش طراحی قالب سایت فروشگاهی

در هفدهمین بخش از مجموعه آموزشی طراحی فروشگاه آنلاین، به یکی از مباحث به روز و کاربردی در css3 خواهیم پرداخت.transition در css برای ایجاد افکت های انیمیشنی در حالتی که موس را روی یک بخش از صفحه قرار می دهیم کاربرد دارد.
فرض کنید که می خواهید width یک بخش را به صورت انیمیشنی با استفاده از دستورات css تغییر دهید و از جاوااسکریپ یا جی کوئری هم استفاده نکنید،در این حالت باید به سراغ transition بروید.با استفاده از transition قادر خواهیم بود که خواص css را با حالت انیمیشنی و جلوه بسیار زیبا در مدت زمان معین و با افکت ویژه تغییر دهیم.آنچه در این مجموعه خواهیم دید:
1) مقایسه دستور hover در css با دستور transition و بررسی تفاوت های آنها در یک مثال کاملا عملی
2) استفاده از دستور transition برای تغییر رنگ بخش هایی از سایت به حالت انیمیشنی
3) بررسی موشکافانه همه ویژگی های مربوط به transition و هم چنین بررسی easing های متنوع و افکت های مختلف در این دستور
4) معرفی سایتی برای ساخت انواع transition ها به صورت آنلاین و هم چنین نحوه استفاده از آن در صفحات طراحی شده
5) بررسی پیشوندهای -o- ، -webkit-،-moz- و مفهوم آنها در transition و سازگاری آن با اتواع مرورگرها
6) بررسی delay در transition
7) بررسی مفهوم all در transition
8) کاربردی از transition جهت تغییر width یک بخش و هم چنین تغییر border یا کادر آن و هم چنین خواصی دیگر در css
9) استفاده از class برای دادن استایلی خاص به یک قسمت از صفحه
و...

آموزش PHP/منوی داینامیک

از این بخش به بعد کدنویسی php را به صورت حرفه ای آغاز خواهیم کرد.
به این ترتیب که تک تک قسمت های سایت را از حالت استاتیک به حالت داینامیک تبدیل می کنیم.مزیت داینامیک بودن سایت آن است که افزودن یا حذف یا ویرایش بخش های داینامیک به سادگی توسط مدیر سایت امکان پذیر است و عملا دیگر نیازی به دستکاری کدهای html که کاری وقت گیر است، نخواهد بود.در این بخش به داینامیک نمودن منوی اصلی سایت(منوی بالای سایت) خواهیم پرداخت.بدین صورت که table جدیدی در دیتابیس مربوطه ایجاد خواهیم کرد و سپس آیتم های منو را در این جدول ذخیره سازی خواهیم نمود.
فعلا عمل insert را به صورت دستی در دیتابیس انجام می دهیم و در آموزش های مربوط به ساخت پنل مدیریت به نحوه insert کردن منوی جدید یا سایر اعمال دیگر از جمله delete کردن یا edit کردن یک منو نیز خواهیم پرداخت.پس از ایجاد جدول و وارد کردن منوهای مورد نظر در جدول ، حال باید به سراغ دریافت اطلاعات از دیتابیس برویم و با استفاده از دستوری مانند PDO اطلاعات را دریافت نموده و در صفحه به کاربر نمایش دهیم.آنچه در این بخش خواهیم آموخت:
1) نحوه ایجاد یک دیتابیس جدید و تنظیم collation آن برای سازگاری با زبان فارسی
2) ایجاد جدولی به نام tblmenu برای ذخیره سازی منوها در آن
3) ایجاد سه فیلد جدید با نام های id،title،img از نوع int،varchar و مشخص نمودن طول آنها
4) insert کردن منوهای مورد نظر و هم چنین وارد نمودن آدرس عکس ها یا آیکن های هر منو
5) ایجاد فایل جدیدی با نام connect.php جهت اتصال به دیتابیس مورد نظر
6) استفاده از دستور PDO و نحوه اتصال به دیتابیس (پایگاه داده) با استفاده از این دستور
7) بررسی یوزر و پسورد در لوکال و هاست واقعی و نحوه وارد نمودن آنها جهت اتصال به بانک
8) تنظیم NAMES در دستور PDO جهت تنظیم بر روی utf-8
9) فراخوانی فایل connect.php و نحوه ایجاد کوئری جدید در php
10) چگونگی prepare کردن کوئری در PDO سپس execute نمودن آن کوئری
11) استفاده از دستور:
fetch(PDO::FETCH_ASSOC)
12) دریافت مقادیر موجود در هر فیلد دیتابیس و ذخیره سازی آنها در یک متغیر
13)echo کردن مقادیر دریافتی از دیتابیس در ul مربوط به منوی بالای صفحه و ایجاد یک li به ازای هر آیتم دریافتی از دیتابیس

آموزش PHP/منوی داینامیک

در ادامه بخش هجدهم، در این قسمت به تکمیل داینامیک نمودن منوی اصلی سایت می پردازیم.در قسمت قبل منوها را داینامیک نمودیم و اما در این بخش قصد داریم زیرمنوها را نیز به صورت داینامیک از دیتابیس دریافت کنیم و به کاربران نمایش دهیم.آنچه در این بخش خواهیم دید:
1) ایجاد table جدیدی با نام tblzirmenu در دیتابیس جهت ذخیره سازی زیرمنوها
2)ایجاد سه فیلد id,title,parent از نوع int,varchar,varchar در جدول فوق
3)insert نمودن برخی از زیرمنوها در این table
4)یافتن تعداد زیرمنوهای هرمنو با استفاده از دستور rowCount در PDO
5) استفاده از دستور شرطی if جهت نمایش یا عدم نمایش زیرمنو در صورت وجود یا عدم وجود
6) استفاده از کوئری select جهت اتصال به دیتابیس و فراخوانی زیرمنوها
7) کاربرد حلقه while تو در تو جهت fetch کردن زیرمنوها از tblzirmenu
8) نحوه نوشتن مقدار متغیرهای غیرعددی در یک کوئری با استفاده از سینگل کوتیشن یا دابل کوتیشن ها
9) توضیحاتی در مورد ترکیب متغیرها و دستورات مربوط به php و رفع ایرادات احتمالی یا باگ ها
10) prepare نمودن و سپس execute کردن و هم چنین fetch کردن اطلاعات با استفاده از PDO در php

آموزش PHP/اسلایدشو داینامیک

در ادامه بخش نوزدهم، در این قسمت به داینامیک نمودن اسلایدر سایت می پردازیم .به عبارت دیگر قصد داریم که اسلایدری که قبلا طراحی کرده بودیم را از حالت استاتیک به حالت داینامیک تبدیل کنیم. در ادامه این مجموعه به نحوه ایجاد بخشی در پنل مدیریت جهت انتخاب تصاویر موجود در اسلاید نیز خواهیم پرداخت. و اما آنچه در این بخش خواهیم دید:
1) ایجاد table جدیدی با نام tblmahsool در دیتابیس جهت ذخیره سازی محصولات
2)ایجاد سه فیلد id,title,img,slideاز نوع int,varchar,varchar,int در جدول فوق
3)insert نمودن برخی ازمحصولات فروشگاه در این table
4)چگونگی مشخص نمودن تصاویری که باید در این اسلایدر نمایش داده شوند.(با استفاده از field مربوط به slide)
5) مثالی دیگر از کوئری های شرطی با استفاده از where و اتخاب برخی از سطرهای دیتابیس
6) نحوه نوشتن مقدار متغیرهای غیرعددی در یک کوئری با استفاده از سینگل کوتیشن یا دابل کوتیشن ها
7) توضیحاتی در مورد ترکیب متغیرها و دستورات مربوط به php و رفع ایرادات احتمالی یا باگ ها
8) prepare نمودن و سپس execute کردن و هم چنین fetch کردن اطلاعات با استفاده از PDO در php
و...

آموزش PHP/بخش جدیدترین محصولات

در ادامه بحث داینامیک کردن بخش های استاتیک وب سایت، در این قسمت به داینامیک نمودن بخش جدیدترین محصولات سایت می پردازیم .به عبارت دیگر قصد داریم که بخش جدیدترین محصولات که قبلا طراحی کرده بودیم را از حالت استاتیک به حالت داینامیک تبدیل کنیم. در ادامه ، بخش پرفروش ترین محصولات را نیز به صورت داینامیک در سایت نمایش خواهیم داد.و اما آنچه در این بخش خواهیم دید:
1) مفهوم و کاربرد order by fieldname desc/asc و بحث انتخاب براساس نزولی یا صعودی بودن فیلد
2) انتخاب چهار محصول جدید که به فروشگاه اضافه شده و سپس نمایش آنها در وب سایت به صورت اتوماتیک
3) کاربرد عملی و بررسی مفهوم limit در کوئری های sql
4) echo کردن li های مربوط به بخش جدیدترین محصولات با استفاده از حلقه while
5) ایجاد field جدیدی در جدول محصولات که تعداد فروش هر محصول را ذخیره می کند.
6) انتخاب پرفروش ترین محصولات براساس فیلد foroosh در جدول محصولات با استفاده از دستور order به صورت کاملا خودکار
7) ایجاد field جدیدی برای مشخص نمودن تعداد موجود از هر محصول، در فروشگاه
8) چگونگی تشخیص موجو بودن یا نبودن محصول در فروشگاه و سپس نمایش پیغام مناسب با توجه به موجود بودن یا نبودن محصول، به کاربران سایت
9) ایجاد فیلدی دیگر جهت ثبت قیمت های مربوط به محصولات (از نوع int )
10) اصلاحات جزیی در مورد کدهای css مربوط به بخش های موجود در سایت از جمله بخش نمایش موجود بودن یا نبودن محصول( با کمک فایرباگ)

آموزش PHP/بخش محصولات پیشنهادی

موضوع:PHP | در ادامه بحث داینامیک کردن بخش های استاتیک وب سایت، در این قسمت به داینامیک نمودن بخش محصولات پیشنهادی سایت می پردازیم .به عبارت دیگر قصد داریم که بخش محصولات پیشنهادی که قبلا طراحی کرده بودیم را از حالت استاتیک به حالت داینامیک تبدیل کنیم. در ادامه ، بخش پربحث ترین محصولات و محبوب ترین محصولات را نیز به صورت داینامیک در سایت نمایش خواهیم داد.و اما آنچه در این بخش خواهیم دید:
1)ایجاد فیلد جدیدی تحت عنوان pishnahad در tblmahsool از نوع int و با length برابر با 1
2)ایجاد فیلد جدیدی تحت عنوان porbahs در tblmahsool
3) کاربرد عملی و بررسی مفهوم limit در کوئری های sql
4) echo کردن li های مربوط به بخش محبوب ترین محصولات با استفاده از حلقه while
5) ایجاد field جدیدی در جدول محصولات که تعداد فروش هر محصول را ذخیره می کند.
6) انتخاب پر بحث ترین محصولات براساس فیلد porbahs در جدول محصولات با استفاده از دستور order به صورت کاملا خودکار
7) کاربردی دیگر از دستور order by fieldname desc/asc و انتخاب به صورت نزولی یا صعودی بر اساس یک فیلد
8) ایجاد بخش جدیدی در جدول محصولات تحت عنوان bazdid جهت نمایش محبوب ترین محصولات
-این فیلد در بخش های بعدی کاربرد آماری نیز خواهد داشت.به عبارتی میزان بازدیدهای هر محصول یا کالا را در این فیلد ثبت خواهیم کرد.
9) اصلاحات جزیی در مورد کدهای css مربوط به بخش های موجود در سایت از جمله بخش نمایش موجود بودن یا نبودن محصول( با کمک فایرباگ)

آموزش PHP/ساخت سبد خرید

در این بخش،ابتدا به طراحی قالب سبد خرید فروشگاه می پردازیم.آنچه در این بخش خواهیم دید:
1) ایجاد تگ جدید تحت عنوان sabad که کل سبد خرید را در بر می گیرد.
2) ایجاد بخشی دیگر جهت نمایش علامت مثلثی شکل ( فلش) هنگام باز شدن بخش سبد خرید
3) ایجاد بخش دیگری با id برابر با sabad1 و استایل دهی موارد فوق در css
4) کاربردی دیگر از دستور z-index و مفهوم آن در css
5) مثال هایی دیگر از دستورات border-radius و position ها و...
6) مثالی عملی از کاربرد position از نوع releative و absolute در css
7) ایجاد تگ ul جدید و سپس قرار دادن li هایی درون آن، جهت نمایش هر محصول در سبد خرید و نمایش تصویر،نام،تعداد محصول و...
8) نوشتن کدهای مربوط به جی کوئری و کار با selector ها و event ها
9) کاربرد دستور show در جی کوئری جهت نمایش سبد خرید
10) کاربرد دستور hide جهت محو نمودن بخش سبد خرید
11) ایجاد بخشی جدید با id برابر با tarik جهت محو نمودن صفحه و تاریک کردن کل صفحه هنگام نمایش سبد خرید کالا
12) کاربردی از position از نوع fixed جهت نمایش بخشی در محل کاملا ثابت و بدون تغییر و بررسی دقیق مفهوم این نوع position
13) نوشتن کدهای jquery جهت محو نمودن صفحه هنگام کلیک کردن روی سبد خرید جهت ایجاد جلوه بسیار زیبا در سایت

آموزش PHP/ساخت سبد خرید

در بخش قبل کدهای ساختاری(html) و هم چنین دستورات css لازم برای ساخت سبد خرید را بررسی کردیم.
در این بخش ، قصد داریم کدهای jquery جلسه قبل را یک گام حرفه ای تر کنیم و به سمت طراحی حرفه ای پیش برویم. 
همانطور که به خاطر دارید ، در بخش قبل با استفاده از دو دستور ساده show و hide در jquery ، سبد خرید را نمایش دادیم.
نکته اینجاست که محو شدن و یا نمایش سبد کالای کاربر، اگر به صورت انیمیشنی انجام شود خروجی کار بسیار حرفه ای تر به نظر خواهد رسید.آنچه در این بخش می بینیم:
1) کاربرد دستور opacity در jquery جهت ایجاد انیمیشن های جذاب
2) کاربرد دیگر از دستور animate در jquery و آشنایی با نحوه انجام animate ها با jquery
3) بررسی callback function در دستور animate همراه با مثال عملی و کاملا کاربردی

آموزش PHP/ساخت سبد خرید

در ادامه بحث طراحی سبد خرید ، ابتدا در tblsabad فیلد جدیدی تحت عنوان tedad ایجاد می نماییم تا تعداد هر محصول در سبد خرید را ذخیره سازی نماییم.زیرا ممکن است کاربر از یک محصول بیشتر از یک عدد نیاز داشته باشد و بخواهد تعداد بیشتری را به سبد خرید بیافزاید.آنچه که در این بخش خواهیم دید:
1) بررسی اینکه آیا محصول مورد نظر کاربر قبلا در سبد وجود داشته است یا خیر؟
2)اجرای دو کوئری مختلف با استفاده از دستور شرطی if و سپس افزودن محصول جدید به دیتابیس( یا افزایش تعداد موجود در سبد از همان نوع محصول)
3) کار با کوئری update در pdo
4)نحوه عیب یابی و رفع ایرادات دستورات sql به هنگام استفاده از ajax و نمایش کوئری ها جهت بررسی صحت و یا عدم صحت آنها
-ان کار با echo نمودن دستورات sql در صفحه و سپس نمایش آن در دستور done انجام می پذیرد.
5) کار با ajax با استفاده از جی کوئری و مفهوم type,url,data در ایجکس جی کوئری
6) دستور done پس از اجرای ایجکس
7) کار با دستورات مختلف pdo و حل مثال های کاربردی در مورد دستورات sql و pdo

آموزش PHP/ساخت سبد خرید

در این بخش از مجموعه آموزشی ساخت فروشگاه آنلاین به سراغ نحوه دریافت اطلاعات از tblsabad خواهیم رفت و سبد خرید را به صورت داینامیک خواهیم ساخت.آنچه در این بخش می بینیم:
1) بررسی set شدن کوکی با استفاده از دستور isset
2)اجرای دو کوئری به صورت تو در تو و استفاده از دو حلقه while جهت دریافت مشخصات محصولاتی که در سبد خرید کاربر وجود دارد.
3) کار با کوئری select در pdo و مثال هایی متفاوت ، از این کوئری مهم
4) کار با افزونه های فایرفاکس که کار ما را در طراحی وب سایت راحت تر می کنند.
5) نمایش پیغام هیچ محصولی در سبد خرید شما وجود ندارد (در حالتی که کاربر هنوز سبد خریدی را تشکیل نداده است)
7) کار با دستورات مختلف pdo و حل مثال های کاربردی در مورد دستورات sql و pdo

آموزش PHP/ساخت سبد خرید

تا کنون در بحث سبد خرید، موفق شده ایم که محصولی را به سبد خرید اضافه کنیم و هم چنین با نحوه استفاده از کوکی ها برای تشکیل سبد خرید آشنا شدیم.اما هنوز کار ما تکمیل نشده است.چرا؟ زمانی که کاربر محصولی را به سبد خرید خود اضافه می کند تا قبل از رفرش کردن صفحه، نمی تواند محصول جدید را در سبد خرید خود مشاهده نماید.
-بنابراین در این جلسه و جلسات بعد،ابتدا باید کاری کنیم که کاربر به محض اینکه محصولی را به سبد اضافه نمود قادر به مشاهده آن محصول،در سبد خرید خود باشد.
در اینجا با دو حالت مختلف رو به رو هستیم:
1)حالت اول آنکه محصولی که کاربر امتخاب نموده قبلا در سبد موجود است، کاری که در اینحالت باید انجام دهیم آن است که تعداد موجود از آن کالا را در سبد خرید یک واحد افزایش دهیم.
-پس سوال اینجاست که ما چگونه با دستورات jquery می توانیم تشخیص دهیم که آیا محصول ، قبلا در سبد وجود دارد یا خیر؟
2)اما حالت دوم: حالتی است که محصول مورد نظر کاربر قبلا در سبد خرید وی وجود نداشته است.در اینحالت باید یک سطر جدید به سبد خرید اضافه نماییم تا کاربر بتواند محصول جدید را هم در سبد خرید مشاهده نماید.
1) اختصاص id به هر یک از li هایی که در سبد خرید وجود دارد.
2) کار با دستور length در جی کوئری برای یافتن تعداد موجود از یک سلکتور در صفحه
3) نحوه ادغام رشته های جی کوئری و مقادیر متغیرها با استفاده از علامت 
4) استفاده از دستور if پس از اجرای ajax و در قسمت done جهت بررسی دو حالت فوق
5) بدست آوردن تعداد کنونی محصول مورد نظر در سبد خرید با استفاده از دستور html جهت دریافت محتوای بخش مربوط به تعداد محصول
6) کاربرد دستور parseInt جهت جمع ریاضی وار دو متغیر و بررسی کاربرد دقیق آن در کدنویسی
7) افزایش متغیر tedad و سپس جایگزین نمودن آن در محل مورد نظر با استفاده از کدهای jquer

آموزش PHP/ساخت سبد خرید

در این بخش در ادامه بحث ساخت سبد خرید php ابتدا فیلد مربوط به قیمت را نیز در سبد خریدمان اضافه خواهیم کرد.
این کار به سادگی قابل انجام است.کافیست که از جدول محصولات در دیتابیس، فیلد قیمت را دریافت نموده و سپس در سبد خرید به کاربر نمایش دهیم.در ادامه به این موضوع خواهیم پرداخت که چگونه می توان به محض اینکه کاربر روی افزودن به سبد خرید کلیک کرد آن محصول را به سبد خرید اضافه نمود( بدون آنکه نیاز به رفرش کردن صفحه باشد)
آنچه در این بخش خواهیم آموخت:
1) اتصال به بانک اطلاعاتی و سپس دریافت قیمت محصول و ذخیره آن در متغیر gheymat
2) نمایش مقدار متغیر فوق در بخش سبد خرید کاربر
3) نحوه بدست آوردن سورس عکس محصول با استفاده از jquery به کمک دستور attr
4) استخراج نام و قیمت محصول هنگام کلیک روی افزودن به سبد خرید با استفاده از jquery و بدون نیاز به استفاده از ajax مجدد
5) اختصاص id به بخش های مربوط به قیمت،عکس،نام محصول ( جهت دسترسی ساده تر به بخش مورد نظر و دریافت مقدار موجود در آن)
6) استفاده از دستور html در jquery جهت استخراج محتوای html یک بخش از صفحه
7) کاربرد ترکیبی find و parents جهت بدست آوردن سلکتورهای فرزند یا والد در jquery
8) استفاده از دستور append جهت ایجاد یک سطر جدید در سبد خرید و سپس نمایش مقادیر استخراج شده توسط دستورات html در مرحله قبل
9) مروری بر آنچه که انجام شد.

آموزش PHP/ساخت سبد خرید

در ادامه ساخت سبد خرید، در این بخش قصد داریم بخشی از سبد را به نمایش قیمت کل و بخشی دیگر را برای نمایش تعداد کل کالاهای موجود در سبد و بخشی را جهت انتقال کاربر به درگاه پرداخت کدتویسی کنیم.موضوع این بخش بیشتر بر روی htmlcss متمرکز است.در جلسات بعد می پردازیم به کدنویسی jquery همین بخش ها.
این بخش مروری بر مباحث جلسات گذشته می باشد تا تسلط بیشتری بر مباحث پیدا کنیم.
آنچه در این بخش خواهیم آموخت:
1) نحوه ایجاد circle (دایره) در html با استفاده از دستورات css
2) کاربرد دستور line-height جهت تنظیم موقعیت محتوای درونی یک بخش
3)بحث در مورد position از نوع absolute و چگونگی نمایش یک بخش در محل ثابت (نسبت به المان های parent)
4) عیب یابی و رفع مشکلات موجود در کدهای css و html با استفاده از فایرباگ
5) z-index و کاربرد آن در css و هم چنین تنظیمات مربوط به position از نوع relative

آموزش PHP/ساخت سبد خرید

در ادامه ساخت سبد خرید، در این بخش قصد داریم نحوه حذف محصولات از سبد خرید را مطرح نماییم.عملیات حذف محصول از سبد خرید دو مرحله دارد: مرحله اول آنکه با استفاده از آژاکس ، آی دی محصول را به صفحه ای تحت عنوان delete.php ارسال نماییم و آنجا با استفاده از دستوراتphp محصول مورد نظر کاربر را از سبد خرید حذف نماییم.
مرحله دوم آن است که علاوه بر حذف محصول از tblsabad باید li مربوط به آن محصول را از بخش سبد خریدمان نیز حذف نماییم.بنابراین در این مجموعه موارد زیر را انجام خواهیم داد:
1) اختصاص id یا class خاص به بخش مربوط به حذف محصولات
2) بررسی نحوه انتخاب سلکتورها در jquery بر اساس المان های parent و نیز بدون آنها و تفاوت هر کدام از سلکتورها
3) ایجاد صفحه ای تحت عنوان delete.php جهت اتصال به دیتابیس و سپس حذف محصول مورد نظر کاربر از سبد خرید وی
4) مثالی دیگر از نحوه کار با ajax در jquery و ارسال data به صفحه مورد نظر( delete.php)
5) استفاده از query از نوع delete و نحوه حذف محصول از سبد خرید (در دیتابیس) به کمک دستورات pdo
- بنابراین،تا کنون در این مجموعه، به مرور با کوئری های select,update,insert,update,delete که از اساسی ترین کوئری ها در sql هستند آشنایی کامل پیدا کردیم.
6) استفاده از دستور remove جهت حذف li مورد نظر از سبد خرید پس از اجرای عملیات ajax