جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 6

در قسمت ششم از این جلسه، به آموزش 'طراحی منوی فروشگاه 6' می پردازیم.

 آنچه که در قسمت قبل طراحی شد

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

1. نحوه ی طراحی و تکمیل منوی مورد نظر.
2. نحوه ی تغییر رنگ خط جداکننده ی منوها.

جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی کاربری  1

در قسمت اول از این جلسه، به آموزش 'طراحی منوی کاربری 1' می پردازیم.

 آنچه که در قسمت قبل طراحی شد

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

1. نحوه ی طراحی و تکمیل منوی مورد نظر.
2. نحوه ی تغییر رنگ خط جداکننده ی منوها.

آنچه که در قسمت 'طراحی منوی کاربری 1' خواهید آموخت

1. آموزش ایجاد منوی کاربری پایه و استایل دهی به آن.
2. آموزش ایجاد عناصر منوی کاربری و استایل دهی به آنها.
3. آموزش نحوه ی دانلود کردن آیکن های مورد نیاز از اینترنت.
4. آموزش نحوه ی اضافه کردن آیکن ها به عناصر منوی کاربری.

 1.آموزش ایجاد منوی کاربری پایه و استایل دهی به آن

 همان طور که در تصویر زیر مشاهده می کنید، در این قسمت قصد داریم منوی کاربری را ایجاد کنیم:

 برای ایجاد این بخش، ابتدا نرم افزار Dreamweaver را باز کنید، و برای باز کردن محتویات سایت مورد نظر، از منوی 'site' گزینه ی 'manage sites' را انتخاب کرده و سایت مورد نظر خود را که قبلا روی آن کار می کردیم، انتخاب کنید. همان طور که می دانید، از قبل، نام سایت خود را eshop قرار دادیم، پس گزینه ی 'eshop' را انتخاب کنید. سپس خواهید دید که محتویات سایت در سمت راست صفحه نشان داده خواهد شد:

 در ادامه، برای اضافه کردن کدهای خود، فایل 'index.php' را باز می کنیم، و در زیر div با آی دی "top1" شروع به اضافه کردن کدهای خود می کنیم. ابتدا یک عنصر <div> ایجاد می کنیم، و id آن را به دلخواه برابر با 'user' قرار می دهیم. سپس برای اینکه ویژگی های ظاهری این <div> را مشخص کنیم، تگ <style> را باز می کنیم، و اعمال زیر را انجام می دهیم: 

1. width دیو(div) مورد نظر را برابر با 1100 پیکسل قرار می دهیم.
2. height دیو(div) مورد نظر را برابر با 45px قرار می دهیم.
3. سایه ی دیو(div) مورد نظر را به صورت box-shadow: 1px 1px 4px #eee تنظیم می کنیم.
4. برای تعریف رنگ پس زمینه، دستور background: #999 را تنظیم می کنیم.

 اکنون اگر صفحه را رفرش(refresh) کنیم، مشاهده می کنیم که این <div> به وجود آمده است، اما هنوز در جایگاه اصلی خود قرار نگرفته است، برای اینکه بتوانیم این <div> را در وسط صفحه قرار دهیم از دستور margin: 0 auto استفاده می کنیم:

دسترسی به موارد آموزشی بالا در بسته خریداری شده

• شماره جلسه: 2
• نام فایل ویدئو: 07
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (طراحی منوی کاربری 1) در ویدئو: 00:00 

جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی کاربری 2

در قسمت دوم از این جلسه، به آموزش 'طراحی منوی کاربری 2' می پردازیم.

 آنچه که در قسمت قبل طراحی شد

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

1.  ایجاد منوی کاربری پایه و استایل دهی به آن.
2. ایجاد عناصر منوی کاربری و استایل دهی به آنها.

آنچه که در قسمت 'طراحی منوی کاربری 2'خواهید آموخت

1.  تنظیم عکس ها و متن های عناصر منوی کاربری.
2. ایجاد قسمت جستجو با استفاده از تگ form.
3. قرار دادن عکس به جای دکمه ی submit در فرم.

 3.قرار دادن عکس به جای دکمه ی submit در فرم

 بعد از اینکه دکمه ی 'ثبت' را که یک نوع input از نوع submit است، ایجاد کردیم دکمه ی مورد نظر به شکل زیر در خواهد آمد:

 اکنون می خواهیم دکمه ی مورد نظر را به شکل زیر تبدیل کنیم، که از نظر گرافیکی نسبت به دکمه ی خالی از گرافیک 'ثبت' بسیار زیباتر است:

 برای این کار به سراغ استایل مربوط به input که از نوع submit است می رویم و اعمال زیر را انجام می دهیم:

1.  دستور border: none را اضافه کنید.
2. دستور (background : url(img/search.png  را اضافه کنید.
3. دستور width:38px پیکسل را اضافه کنید.
4. دستور height: 100% را اضافه کنید.
5. دستور no-repeat را به دستور  شماره 2 اضافه کنید.

 در ادامه، برای اینکه قسمت ذره بین  مقداری تنظیم تر شود، می توانیم 'height' آن را کمتر کنیم...

دسترسی به موارد آموزشی بالا در بسته خریداری شده

• شماره جلسه: 2
• نام فایل ویدئو: 08
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (طراحی منوی کاربری 2) در ویدئو: 20:08 

جلسه ی نهم طراحی یک فروشگاه اینترنتی-فرم ثبت نام کاربران

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

در این قسمت از ساخت فروشگاه اینترنتی، می خواهیم نحوه ی ثبت نام کاربران را بررسی نماییم.

آنچه که در قسمت 'فرم ثبت نام کاربران' خواهید آموخت

در قسمت 'فرم ثبت نام کاربران' موارد زیر آموزش داده خواهند شد:

1. استفاده از type جهت استایل دهی در css
2. استفاده از انواع input ها جهت دریافت اطلاعات مربوطه، از کاربران(text,radio,..)
3. نحوه قرار دادن input ها دقیقا در یک ستون (بدون استفاده از جدول و فقط با استفاده از دستورات css )
4. چگونگی استایل دهی به input از نوع text و تنظیمات مربوط به این نوع input
5. مشخص نمودن فیلدهای ضروری (فیلدهای اجباری) فرم ثبت نام
6. تمرینی دیگر در مورد دستورات css از جمله font-family,font-size,float,background,...
7. ایجاد input هایی جهت مشخص نمودن جنسیت کاربر

و...

فرم ثبت نام کاربران

 در جلسه ی قبل، ما، عنصر div با آی دی undermenu1 را به دو ستون سمت راست و سمت چپ، تقسیم بندی کردیم:

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

 دوباره به سراغ فایل register.php می رویم(صفحه ی مربوط به ثبت نام کاربران) و در قسمت col-left یا همان ستون سمت چپ، سه عنصر div را مشاهده می کنیم. همان طور که می دانید، مقدار width این سه عنصر را برابر با %100 قرار داده بودیم. هرکدام از این div ها، یک سطر را در داخل بخش ستون سمت چپ(col-left) برای ما ایجاد می کند. این یعنی هرکدام از این div ها، در واقع همین سطهای خاکستری رنگی هستند که در اینجا می بینیم: 

 حالا باید ببینیم که چه کار دیگری را می خواهیم انجام دهیم. 

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

پس به صفحه ی کدهای خود می رویم و شروع به نوشتن کدهای خود می کنیم:

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:

• شماره جلسه: 9
• نام فایل ویدئو: 36
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (فرم ثبت نام کاربران) در ویدئو: 00:00

جلسه ی نهم طراحی یک فروشگاه اینترنتی-فرم ثبت نام کاربران 2

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

در این قسمت از ساخت فروشگاه اینترنتی، می خواهیم نحوه ی ثبت نام کاربران را بررسی نماییم.

آنچه که در قسمت 'فرم ثبت نام کاربران 2' خواهید آموخت

در قسمت 'فرم ثبت نام کاربران 2' موارد زیر آموزش داده خواهند شد:

1. کار با select ها در html
2. بررسی نحوه اختصاص ظاهری متفاوت به تگ های select نسبت به آنچه که مرورگرها به صورت پیش فرض  نمایش می دهند.
3. بررسی چگونگی ایجاد لیست و افزودن آیتم های جدید با استفاده از option
4. کار با event از نوع change و کاربرد آن در jquery با جزییات مربوطه
5. کار با دستور find و مثالی کاریردی از این دستور مهم در jquery
6. کار با فایرباگ و رفع ایرادات موجود در زمینه css
7. تغییر جهت نوشتاری در input های انگلیسی (مانند ایمیل و....)
8. کار با دستور text در jquery

و...

فرم ثبت نام کاربران 2

 حالا می خواهیم بررسی کنیم که فیلد بعدی که می خواهیم ایجاد کنیم از چه نوعی است. ما قبلا فیلدهای نام و جنسیت و پست الکترونیک را ایجاد کرده بودیم. الان می خواهیم فیلدهای رمز عبور و تکرار رمز عبور را ایجاد کنیم. پس بیایید این دو فیلد را بعد از فیلد جنسیت اضافه کنیم:

 دقیقا مشابه با همان کاری که قبلا انجام داده بودیم، در اینجا یک div داریم که در داخل آن یک تگ <span> با آی دی onvan ایجاد می کنیم:

 مشابه با کاری که در بالا انجام دادیم، همین کار را دوباره در اینجا انجام می دهیم. اکنون تگ span را می بندیم و علامت ستاره را نیز به آن اضافه می کنیم. چون که کاربر حتما باید پسورد خودش را وارد کند و همچنین چون که این فیلد یک فیلد ضروری می باشد: 

 همان طور که در عکس بالا می بینید، input که ما می خواهیم از آن استفاده کنیم، از نوع password می باشد و با input قبل متفاوت است به این دلیل که این بار قرار است از نوع password باشد، یعنی این بار type یا همان نوع input ما متفاوت است. چون می خواهیم زمانی که کاربر پسورد خود را وارد می کند، کاراکترهایی که در آن input دارند وارد می شوند، مشخص نباشند.

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:

• شماره جلسه: 9
• نام فایل ویدئو: 37
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (فرم ثبت نام کاربران2) در ویدئو: 03:04

اکنون به ادامه ی بحث طراحی صفحه ی ثبت نام می پردازیم. در جلسه ی قبل، آمدیم و یک سری از بخش ها را از جمله قسمت های رمز عبور، تکرار رمز عبور، شماره موبایل، تلفن ثابت و نام استان را اضافه کردیم. و همچنین مشاهده کردیم که چطور می توانیم از تگ select و تگ های option یک همچین لیستی را در سایت ایجاد کنیم تا کاربران بتوانند استان خودشان را انتخاب کنند:

 حالا کار ما از اینجا شروع می شود، می خواهیم مشابه با همان چیزی که برای نام استان انجام دادیم، بخشی را ایجاد کنیم که کاربر بتواند شهر خودش را انتخاب کند. پس به صفحه ی register.php می رویم:

 همان طور که در تصویر بالا مشاهده می کنید، آمدیم و ابتدا فیلد استان را مشخص کردیم و بعد یک علامت ستاره یا به عبارتی، ضروری بودن انتخاب استان را قرار دادیم و الی آخر همینطور تگ های select و option را انتخاب کردیم. حالا همین ها را دوباره کپی می کنیم و از آنها استفاده می کنیم. این بار به جای استان، شهر را می نویسیم و به همین صورت گزینه های ضروری را مانند عکس زیر تغییر می دهیم:

 حالا اجازه بدهید برای اینکه اشتباه نشود، و کدهای جی کوئری ما دچار تداخل نشوند، ما همه ی آی دی های که در اینجا از آنها استفاده کرده ایم را به جای کلمه ی ostan به کلمه ی shahr تغییر دهیم. پس فقط کلمه های ostan را تبدیل می کنیم به shahr. حالا کدهای جی کوئری را نیز کپی می کنیم و...

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:

• شماره جلسه: 9
• نام فایل ویدئو: 38
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (فرم ثبت نام کاربران3) در ویدئو: 00:00

جلسه ی نهم طراحی یک فروشگاه اینترنتی-نحوه ی تولید کد کپچا

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

آنچه که در قسمت 'نحوه ی تولید کد کپچا' خواهید آموخت

در قسمت'نحوه ی تولید کد کپچا' موارد زیر آموزش داده خواهند شد:

1. بررسی کاربرد و فایده استفاده از کد کپچا در وب سایت
2. استفاده از تابع imagecreate جهت ایجاد متغیری که حاوی عکس کپچا یا کد امنیتی است
3. ایجاد تابعی تحت عنوان image_create جهت تولید عکس کپچا
4. استفاده از دستور imagefilledrectangle و توضیحات کامل در مورد کاربرد این تابع در ساخت کپچا
5. بررسی نحوه تبدیل سیستم رنگ بندی RGB به سیستم قابل استفاده در php و تعیین رنگ بندی عناصر کپچا
6. مفهوم و کاربرد تابع imageline و بررسی آرگومان های این تابع و نحوه ترسیم لاین جدید روی عکس کپچا
7. کار با دستور rand جهت تولید عدد تصادفی در php در یک بازه خاص عددی
8. استفاده از تابع imagepng و دریافت خروجی png

نحوه ی تولید کد کپچا

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

قبل از آن، ببینیم که اصلا کاربرد کد کپچا چیست؟ فایده ی داشتن چنین کدی در داخل وبسایت چیست؟ 

 اولین نکته ای که باید به آن توجه داشته باشیم، این است که کد کپچا درواقع یک عکس می باشد. بعنوان مثال کد کپچایی که در عکس بالا مشاهده می کنید، عملا یک متن نیست، بلکه یک عکس می باشد. بعنوان مثال اگر روی آن راست کلیک کنیم، و save as را بزنیم، می توانیم این عکس را ذخیره کنیم: 

 کاربرد این عکس این است که، فرض کنید یک ربات می خواهد اطلاعاتی را در اینجا وارد کند، و یا به عبارت دیگر، این اطلاعات را ارسال کند به صفحه ای که قرار است عملا ثبت نام در آنجا انجام شود، و در دیتابیس ذخیره شود. زمانی که ربات به این صفحه می رسد، و می خواهد اطلاعات را ارسال کند، چون که قادر به خواندن متن داخل این عکس نیست، بنابراین اجازه ی ارسال اطلاعات به دیتابیس را نخواهد داشت. بنابراین نکته ی اصلی و کار اصلی ما در بحث ساخت کد کپچا، این است که بتوانیم با استفاده از php  یک عکس را تولید کنیم، و بدانیم که محتوای داخل این عکس چیست. بحث اصلی جلسه ی ما این است که چطور با استفاده از php، یک عکس را بعنوان کد کپچا تولید کنیم. پس به سراغ نرم افزار دریم ویور می رویم...

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:

• شماره جلسه: 9
• نام فایل ویدئو: 39
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (نحوه ی تولد کد کپچا) در ویدئو: 00:00

جلسه ی نهم طراحی یک فروشگاه اینترنتی-نحوه تولید کد کپچا 2

در قسمت پنجم از این جلسه، به آموزش 'نحوه تولید کد کپچا 2' خواهیم پرداخت.

آنچه که در قسمت 'نحوه تولید کد کپچا 2' خواهید آموخت

در قسمت 'نحوه تولید کد کپچا 2' موارد زیر آموزش داده خواهند شد:

1. بررسی نحوه استفاده از کپچا جهت تشخیص روبات ها
2. کاربرد SESSION در بحث کپچا و توضیحاتی در مورد نحوه چک کردن صحت کد ورودی توسط کاربر
3. ایجاد input جدیدی از نوع text و انجام عملیات استایل دهی جهت ورود کپچا توسط کاربر
4. قرار دادن یک تگ img جهت نمایش کپچا به کاربر
5. نحوه تغییر سورس عکس هنگام رفرش شدن صفحه
6. استفاده از ajax و ارسال درخواست به صفحه تولید کپچا، جهت تولید عکس کپچا
7. کار با دستور attr در jquery
8. توضیحات کامل در مورد ajax در jquery و دریافت خروجی از این دستور

 نحوه ی تولید کد کپچا 2

برویم و به ادامه ی ساخت فرم ثبت نام بپردازیم. تا اینجا ما آمدیم و کد کپچای خود را تولید کردیم(یک عکس png). حالا کاری که می خواهیم انجام بدهیم این است که در این قسمت یک input بگذاریم که کاربر کد کپچا را وارد کند و همچنین عکسی را که تولید کردیم، در اینجا به کاربر نمایش بدهیم:

 به صفحه ی register.php برمی گردیم. همان صفحه ای که داشتیم فرم ثبت نام خود را درون آن ایجاد می کردیم. در این صفحه، فیلد های مختلفی را ساختیم از قبیل تلفن همراه، تلفن ثابت، استان، شهر و... . مجددا در اینجا، همان کاری که در مورد بقیه ی قسمت ها انجام دادیم، همان را تکرار می کنیم. یک تگ div ایجاد می کنیم. در این کار از قسمت های قبلی نیز کمک می گیریم:

 بعد از کپی گرفتن از عبارت مشخص شده، به جای عبارت کد پستی، عبارت: حروف موجود در تصویر را وارد نمایید، را می نویسیم.  پس یک همچین عبارتی را وارد می کنیم تا کاربر متوجه شود که، عبارتی که در تصویر می بیند را وارد کند. مقادیر دیگر را نیز به صورت زیر عوض می کنیم:

 حالا برویم و یک بار رفرش کنیم تا نتیجه را ببینیم و بعد دوباره برگردیم و بقیه ی کارها را انجام دهیم:

 همان طور که مشاهده می نمایید، عبارت مورد نظر نمایش داده شد و یک input نیز وجود دارد که کاربر می تواند کد کپچایی را که می بیند را وارد کند. اما حالا باید مقداری width این input را کمتر کنیم. چون که فضای آن خیلی زیاد می باشد. 

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:

• شماره جلسه: 9
• نام فایل ویدئو: 40
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (نحوه ی تولد کد کپچا2) در ویدئو: 05:28

جلسه ی نهم طراحی یک فروشگاه اینترنتی-نحوه ی تولید کد کپچا 3

در قسمت ششم از این جلسه، به آموزش 'نحوه ی تولید کد کپچا 3' خواهیم پرداخت.

آنچه که در قسمت 'نحوه ی تولید کد کپچا 3' خواهید آموخت

در قسمت 'نحوه ی تولید کد کپچا 3' موارد زیر آموزش داده خواهند شد:

1. کار با تابع microtime و خروجی های مختلف این تابع
2. تبدیل خروجی تابع فوق، به یک رشته از نوع float و سپس استخراج میلی ثانیه
3. آشنایی با دستور round در php به همراه چندین مثال
4. نام گذاری عکس های کپچای تولید شده بر حسب زمان ساخت آنها برحسب میلی ثانیه
5. کار با یکی از مهم ترین دستورات فایلینگ در php تحت عنوان glob جهت دسترسی به فایل های موجود در سرور
6. آشنایی با آرایه ها و هم چنین نحوه دسترسی به تک تک عناصر موجود در آرایه با استفاده از حلقه foreach
7. بحث در مورد حذف کپچاها به صورت جامع

نحوه ی تولید کد کپچا 3

 در این جلسه، بحث اصلی ما این هست که چطور کپچاهای قبلی را پاک کنیم. 

چون عملاً قبول دارید که کپچاها یک بار مصرف هستند. یعنی اگر ما یک کپچایی را یک بار ازش استفاده کردیم، برای بار دوم دیگر از آن کپچا، استفاده نخواهیم کرد. چون که هر بار قرار است یک کد تصادفی جدید، به کاربر نشان داده شود. پس می شود این طور گفت که، کپچاها یک بار مصرف هستند. و بودن آنها در سرور، درواقع فایده ای ندارد. فایده ای که ندارد تازه عملا یک فضایی را دارد اشغال می کند و یک حجم زیادی هم ما نیاز داریم تا آن کپچا ها را در سرور خود ذخیره کنیم.

منتها قبل از این بحث، می خواهیم به بحث دیگری بپردازیم. کپچایی که ما الان تولید کردیم خیلی خوب و بدون هیچ مشکلی دارد جواب می دهد، هر بار که ما صفحه مان را رفرش می کنیم، یک کپچای جدید تولید می شود، و هیچ مشکلی هم وجود ندارد:

 اما تصور کنید که ما آمدیم و  وبسایت خود را آپلود کردیم بر روی اینترنت، حالا کاربرهای زیادی هستند که ممکن است همزمان بیایند و صفحه ی register.php را باز کنند و بخواهند ثبت نام را انجام دهند. در اینجا ممکن است که یک مشکل پیش بیاید، و آن مشکل این است که عکس های کپچایی که برای دو کاربر قرار است تولید شود، اسامی یکسانی پیدا کنند. 

در صورتی این اتفاق می افتد که هر دو کاربر، دقیقا در یک زمان، از دید ثانیه ای، باهم وارد صفحه ی ثبت نام شده باشند. و این صفحه ی captcha.php برای هردوی آنها، در یک تایم یکسان، قرار است که اجرا شود. 

هرچند که احتمال این اتفاق خیلی خیلی کم هست، منتها ما برای اینکه عملا به مشکلی بر نخوریم(در زمانی که بازدید کننده ه های وبسایت ما بالا برود) می خواهیم در اینجا به جای اینکه از تابع time استفاده کنیم، و زمان را برحسب ثانیه به دست بیاوریم، از یک ترفند دیگر استفاده کنیم...

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:

• شماره جلسه: 9
• نام فایل ویدئو: 41
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (نحوه ی تولد کد کپچا3) در ویدئو: 00:00

جلسه ی هشتم طراحی یک فروشگاه اینترنتی-نمایش تعداد کالاهای سبد خرید

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

آنچه که در قسمت قبل طراحی شد

در قسمت قبل، موارد کلی زیر آموزش داده شدند:

1.  نحوه ی حذف کالاها از سبد خرید با استفاده از ajax

مشاهده ی آنچه که در قسمت قبل طراحی شد:

آنچه که در قسمت 'نمایش تعداد کالاهای سبد خرید' خواهید آموخت

در قسمت 'نمایش تعداد کالاهای سبد خرید' موارد زیر آموزش داده خواهند شد:

توضیح مختصر:

 کاری که در این جلسه می خواهیم انجام دهیم این است که، تابعی را بنویسیم که تعداد کل کالاهای موجود در سبد خرید را در دایره ی قرمز رنگ به کاربر نمایش دهد.

نمایش تعداد کالاهای سبد خرید

 به سراغ نرم افزار دریم ویور می رویم و دو فایل left.php و top.php را باز می کنیم. در اینجا، قبل از تابع deletesabad که در جلسه ی قبل آن را نوشتیم، تابع جدیدی را می نویسیم  و نام آن را tedadkol قرار می دهیم. این تابع تعداد کل را برای ما محاسبه می کند. حالا یک متغیر به نام number تعریف می کنیم و مقدار آن را برابر با 0 می گذاریم:

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

دوباره به سراغ نرم افزار دریم ویور می رویم و کدهای جی کوئری مان را می نویسیم:

دسترسی به موارد آموزشی بالا در بسته ی خریداری شده:

• شماره جلسه: 8
• نام فایل ویدئو: 32
• فرمت فایل: mp4.

نقطه ی شروع بحث بالا (نمایش تعداد کالاهای سبد خرید) در ویدئو: 00:00