طراحی یک فروشگاه اینترنتی

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

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

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

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

1.  تبدیل بخش کالاهای پیشنهادی به صورت داینامیک

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

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

در قسمت 'طراحی سبد خرید فروشگاه' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

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

توضیح تفصیلی:

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 جهت محو نمودن صفحه هنگام کلیک کردن روی سبد خرید جهت ایجاد جلوه بسیار زیبا در سایت

 طراحی  سبد خرید فروشگاه

 کاری که اکنون می خواهیم انجام دهیم، این است که اگر کاربر روی سبد خرید کلیک کند، یک باکس به این صورت برای او باز شود:

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

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

 در این قسمت ما آمدیم و با استفاده از تگ <a> و تگ <img> که در واقع شکل سبد مورد نظر بود، بخشی تحت عنوان 'سبد خرید شما' اضافه کردیم. حالا می خواهیم بعد از این بخش، بخش دیگری را ایجاد کنیم تخت عنوان sabad. در واقع این بخش sabad قرار است کالاهایی که کاربر به سبد خرید خودش اضافه کرده را به او نشان بدهد:

 حالا می خواهیم یک بار دیگر برویم و به نحوه ی طراحی این box دقت کنیم. نکته ای که اولا وجود دارد این است که، این قسمتی که دارد کالاهای موجود در سبد را به کاربر نمایش می دهد، هم دارای height ثابت است و هم width آن ثابت است. یعنی طول و عرض این باکس مستطیلی ثابت است. همان طور که در تصویر زیر می بینید، اگر که محصولات بیشتر از یک حد معینی بشوند، می توانیم یک اسکرول را برای آنها در نظر بگیریم. و در داخل این اسکرول، محصولاتمان را به کاربر نمایش بدهیم:

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

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

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

نقطه ی شروع بحث بالا (طراحی سبد خرید فروشگاه) در ویدئو: 01:39

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

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

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

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

1.  طراحی حرفه ای سبد کالا از لحاظ انیمیشنی.

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

آنچه که در قسمت 'طراحی سبد خرید فروشگاه(3)' خواهید آموخت

در قسمت 'طراحی سبد خرید فروشگاه(3)' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

1. ایجاد کوکی ها جهت ذخیره سازی اطلاعات سبد خرید

توضیح تفصیلی:

1. ساخت یک table جدید در دیتابیس db_eshop جهت ذخیره سازی اطلاعات سبد خرید با سه فیلد id,cookiename,idmahsool
2. بررسی مفهوم سیستم های آژاکس (ایجکس) و اهمیت آن در طراحی وب سایت های مدرن
3. نحوه تشخیص id محصولی که کاربر قصد دارد آن را به سبد خرید خود اضافه نماید.
4. کاربردی از دستور attr در jquery جه دریافت اطلاعات یک المان ( id,class,...)
5. کار با ajax با استفاده از جی کوئری و مفهوم type,url,data در ایجکس جی کوئری
6. دستور done پس از اجرای ایجکس
7. نحوه ایجاد کوکی ها در مرورگر با استفاده از دستور setcookie
8. چگونگی ایجاد کوکی منحصر به فرد برای هر کاربر، به صورتی که هیچ دو کاربری مقدار کوکی یکسان نداشته باشند.
9. آشنایی با تابع microtime در php و ایجاد رشته زمانی در php
10. کار با دستور شرطی isset جهت چک کردن وجود یا عدم وجود یک متغیر در php
11. دریافت پارامترها با کمک متود POST در صفحه sabad.php
12. اتصال به بانک اطلاعاتی و ذخیره سازی مقادیر سبد خرید در جدول مربوطه با استفاده از PDO در PHP

 طراحی  سبد خرید فروشگاه(3)

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

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

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

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

 بنابراین این را هم به خاطر داشته باشید که ما قرار است از ajax استفاده کنیم. 

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

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

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

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

نقطه ی شروع بحث بالا (طراحی سبد خرید فروشگاه 3) در ویدئو: 10:04

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

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

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

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

1.  ایجاد کوکی ها با استفاده از php و ajax برای سبد خرید فروشگاه

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

آنچه که در قسمت 'طراحی سبد خرید فروشگاه(4)' خواهید آموخت

در قسمت 'طراحی سبد خرید فروشگاه(4)' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

1.  طراحی سبد خرید با استفاده از php

توضیح تفصیلی:

1. rowCount و کاربرد آن در PDO
2. اجرای دو کوئری مختلف با استفاده از دستور شرطی if و سپس افزودن محصول جدید به دیتابیس( یا افزایش تعداد موجود در سبد از همان نوع محصول)
3. کار با کوئری update در pdo
4. نحوه عیب یابی و رفع ایرادات دستورات sql به هنگام استفاده از ajax و نمایش کوئری ها جهت بررسی صحت و یا عدم صحت آنها
5. کار با ajax با استفاده از جی کوئری و مفهوم type,url,data در ایجکس جی کوئری
6. دستور done پس از اجرای ایجکس
7. کار با دستورات مختلف pdo و حل مثال های کاربردی در مورد دستورات sql و pdo

 طراحی  سبد خرید فروشگاه(4)

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

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

 درواقع عدد یک به عدد 2 تبدیل می شود. بنابراین ما در tblsabad که ایجاد کردیم، به یک فیلد جدید نیاز داریم تا بتوانیم تعداد کالاهایی که مد نظر کاربرمان است را ذخیره کنیم. پس به سراغ phpmyadmin می رویم. بنابراین دیتابیس db_eshop را باز می کنیم و سپس tblsabad را باز کرده و در قسمت structure یک فیلد جدید اضافه می کنیم:

 و نام این فیلد را tedad قرار می دهیم. این فیلدی است که قرار است تعداد هر محصول را در داخل خودش نگه داری کند. نوع آن را INT قرار می دهیم و مقدار value را هم به طور فرضی، 10 در نظر می گیریم. این عدد در حد یک فروشگاه کفایت می کند و حتی زیاد هم هست. حالا تغییرات را ذخیره می کنیم. 

در اینجا یک نکته ی دیگری را هم تکمیل می کنیم. این نکته عبارت است از اینکه، در قسمت else، زمانی که کوکی را وارد کردیم، و همچنین id محصول را هم وارد کردیم، حالا باید تعداد آن را هم مشخص کنیم. زمانی که هنوز کوکی ست نشده است، یعنی زمانی که در این حلقه ی else قرار داریم، چون بار اولی است که کاربر سبد خرید خودش را تشکیل می دهد، ما در قسمت tedad عدد 1 را وارد می کنیم:

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

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

نقطه ی شروع بحث بالا (طراحی سبد خرید فروشگاه 4) در ویدئو: 03:40

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

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

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

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

1. نحوه ی ایجاد قسمت جدیدترین کالاها
2. نحوه ی اضافه کردن قسمت اسلایدشو

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

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

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

توضیح اجمالی:

1. ایجاد div دربردارنده ی قسمت کالاهای پیشنهادی
2.  ایجاد قسمت 'کالاهای پیشنهادی'

توضیح تفصیلی:

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

2.ایجاد قسمت 'کالاهای پیشنهادی'

در این قسمت، به سراغ ایجاد عنوان 'کالاهای پیشنهادی' و نقاط رنگی که در کنار این عنوان مشاهده می شوند می رویم:

 به دلیل اینکه این کار را برای قسمت جدیدترین کالاها، یک بار انجام داده ایم، پس می توانیم دوباره از آن استفاده کنیم. کاری که قبلا انجام دادیم این بود که یک تگ h2 ایجاد کردیم و برای آن یک استایل تعریف کردیم. حالا می خواهیم برای ایجاد قسمت 'جدیدترین کالاها' دوباره از آنها استفاده نماییم. قبل از انجام این کار، یک div جدید را باز می کنیم و مقدار id آن را برابر با 'pishnahad' قرار می دهیم،حالا در داخل این div از تگ h2 مورد نظر استفاده می کنیم:

مشاهده ی کد نویسی:

 اکنون از div با آی دی pishnahad شروع می کنیم و یک استایل دهی مختصر را به آن اضافه می کنیم، به صورت زیر:

1. width یا همان پهنای آن را برابر با % 100 قرار می دهیم.
2. مقدار border آن را برابر با 1px solid #ccc قرار می دهیم که درواقع یک کادر به اندازه ی یک پیکسل را ایجاد می کند.
3. مقدار دستور border-radius را برابر با 7px قرار می دهیم که باعث گرد شدن حاشیه ها می شود.

مشاهده ی کدنویسی:

با انجام این تنظیمات، اگر که صفحه را دوباره رفرش(refresh) کنیم، تغییرات زیر را مشاهده می نماییم:

مشاهده ی نتیجه:

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

مشاهده ی کد نویسی:

 بعد از تعریف استایل برای تگ h2 در داخل  div با آی دی 'pishnahad'، تغییرات را ذخیره می کنیم و دوباره صفحه را رفرش(refresh)می کنیم. همان طور که در تصویر زیر می بینید، استایل این تگ h2 مشابه قسمت جدیدترین کالاها شد: 

مشاهده ی نتیجه:

 به یک نکته ی حائز اهمیت توجه داشته باشید که، دستور float ممکن است ما را دچار سردرگمی کند، الان اگر که کلید F12 را فشار دهیم تا افزونه ی Firebog اجرا شود...

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

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

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

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

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

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

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

1. استفاده از transition در css برای ایجاد افکت های انیمیشنی هنگام رفتن موس بر روی محصولات.

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

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

در قسمت 'طراحی منو به صورت داینامیک' موارد زیر آموزش داده خواهند شد:

توضیح اجمالی:

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

توضیح تفصیلی:

1. نحوه ی ایجاد یک دیتابیس جدید و تنظیم collation آن برای سازگاری با زبان فارسی
2. ایجاد جدولی به نام tblmenu برای ذخیره سازی منوها در آن.
3. ایجاد سه فیلد جدید با نام های img , title ,id از نوع varchar و int و مشخص نمودن طول آنها.
4. insert کردن منوهای مورد نظر و همچنین وارد نمودن آدرس عکس ها یا آیکن های هر منو.
5. ایجاد فایل جدیدی با نام connect.php جهت اتصال به دیتابیس مورد نظر.
6. استفاده از دستور PDO و نحوه ی اتصال به دیتابیس با استفاده از این دستور.

 طراحی منو به صورت داینامیک

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

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

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

برای این کار ما باید اول به دیتابیس خود برویم:

 ابتدا باید برای فروشگاهی که داریم آن را طراحی می کنیم، یک دیتابیس ایجاد کنیم. نام دیتابیس را به طور فرضی db_eshop قرار می دهیم و مقدار collation را برابر با utf8 انتخاب می کنیم. همان طور که مشاهده می کنید، مقدار پیش فرض collation برابر با utf8_general_ci است که ما آن را از نوع utf8_persian_ci انتخاب می کنیم.

همان طور که مشخص است، persian به معنای فارسی است و ci هم به معنای عدم حساسیت به حروف بزرگ و کوچک است.

اکنون این دیتابیس را ایجاد می کنیم و شروع به ساختن table های خودمان می کنیم. 

اولین table ی که ما نیاز داریم، table ی است که این منوها را در داخل آن ذخیره کنیم، یعنی یک table لازم داریم که اولا منوهای اصلی را در داخل آن ذخیره کنیم و یک table دیگر هم لازم داریم، برای اینکه زیرمنوها را در داخل آن ذخیره کنیم:

 بنابراین ما در اینجا دو عدد table نیاز داریم. نام اولین table را tblmenu قرار می دهیم :

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

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

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

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

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

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

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

1. طراحی یک خط به رنگ بنفش در قسمت بالای سایت.
2. طراحی سه گزینه ی 'بازگشت به صفحه ی نخست' و 'درباره ی ما' و 'تماس با ما'.
3. طراحی لوگوی وب سایت و قرار دادن آن در بالای سایت.

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

پیشنهاد می شود قبل از مطالعه ی 'طراحی منوی فروشگاه بخش 1' قسمت اول از جلسه اول را مطالعه نمایید.

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

 در قسمت 'طراحی منوی فروشگاه 1'، موارد زیر آموزش داده خواهند شد:

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

 2. آموزش قرار دادن صحیح آیکن سبد خرید در گوشه ی سربرگ و استایل دهی به آن

 بعد از قرار دادن لوگوی مورد نظر در قسمت قبل، که دارای یک تگ <a> و یک تگ <img> بود،دوباره یک تگ <a> را ایجاد می کنیم. بدین صورت که در داخل این تگ <a>، یک تگ <img> قرار می دهیم و مقدار src این تگ(تگ <img>) را برابر با"img/sabad.png" قرار می دهیم:

<a> <img src = "img/sabad.png" > سبد خرید شما </a>

 مشاهده ی کد نویسی:

 مشاهده ی نتیجه:

 همان طور که در تصویر بالا مشاهده می کنید، آیکن سبد خرید، و عبارت 'سبد خرید شما'، اضافه شده است.

اکنون باید استایل هایی را به تگ <img> و تگ <a>  اضافه کنیم. به دلیل اینکه قرار است قسمت سبد خرید، در سمت چپ صفحه قرار گیرد، می توانیم از دستور ;float : left استفاده کنیم. بنابراین تگ استایل را باز می کنیم و مقدار float : left را به تگ <a> اضافه می کنیم. این بدین معنی است که تگ <a>، به سمت چپ صفحه شناور شود.

مشاهده ی نتیجه:

 همان طور که در عکس بالا مشاهده می نمایید، عبارت 'سبد خرید شما' نسبت به عکس سبد خرید، مقداری پایین تر قرار گرفته است.

هنگامی که می خواهیم مقداری متن را در کنار یک عکس(تگ <img>) قرار دهیم ، این مشکل به وجود خواهد آمد. نحوه ی حل این مشکل بدین صورت است که...

در ادامه ی آموزش 'طراحی   منوی فروشگاه 1' خواهید دید...!

 با خرید بسته ی آموزشی "طراحی منوی فروشگاه 1" موارد زیر را خواهید دید:

1.  نحوه ی صحیح تراز کردن متن در کنار یک عنصر عکس(<img>).
2. نحوه ی صحیح استایل دادن به سبد خرید و کار بر روی ظاهر آن.
3.  نحوه ی ایجاد سایه برای عنصر در بر دارنده ی سبد خرید.
4. نحوه ی ایجاد عنصر <div> در بر دارنده ی منو.

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

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

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

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

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

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

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

1. طراحی خط بنفش رنگ در زیر سربرگ.
2. طراحی سبد خرید و استایل دهی به آن.
3. طراحی قسمت آبی رنگ در بر دارنده ی منو.

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

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

در قسمت 'طراحی منوی فروشگاه 2'  موارد زیر آموزش داده خواهند شد:

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

 1.آموزش ایجاد آیتم های منو و استایل دهی صحیح به آنها

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

 برای طراحی این منو، دوباره صفحه ی index.php را باز می کنیم و در داخل <div> با آی دی menu، شروع به نوشتن کدهای خود می کنیم. برای ایجاد این منو، از تگ <ul> استفاده می کنیم. همان طور که می دانید، در ایجاد کردن یک لیست، از تگ <ul> استفاده می شود و ما نیز دقیقا چون می خواهیم لیستی از منوها را از قبیل: 'صفحه ی نخست' و 'گوشی همراه' و 'لپ تاپ' و... ایجاد کنیم، از تگ <ul> استفاده می کنیم:

 همان طور که در تصویر بالا مشاهده می نمایید، یک تگ <style> را نیز باز می کنیم، تا بتوانیم استایل های خود را در داخل این تگ وارد کنیم. در ادامه، در تگ <style> موارد زیر را اضافه می کنیم:

1.  برای حذف padding پیش فرض، در تمام عناصر <ul>، مقدار padding را برابر با 0 قرار می دهیم.
2. برای حذف margin پیش فرض، در تمام عناصر <ul> مقدار margin را برابر با 0 قرار می دهیم.
3. مقدارwidth و  height برای عناصر <ul> را برابر با %100 قرار می دهیم.
4. به منظور مشاهده ی عنصر <ul>، مقدار background را برای این عنصر به رنگ زرد اختصاص می دهیم.

 با انجام گزینه های بالا، بعد از رفرش(refresh) کردن صفحه، منوی ما به صورت زیر در خواهد آمد:

 همان طور که ملاحظه می نمایید، <ul> مورد نظر ایجاد شد، و دقیقا روی div منو قرار گرفت. اکنون زمان آن رسیده است که در داخل این تگ <ul> شروع به نوشتن عناصر <li> کنیم. همان طور که در عکس دوم از آموزش 'طراحی منوی فروشگاه 1' مشاهده می فرمایید، اولین عنصر <li> باید به 'صفحه ی نخست' اختصاص یابد و شامل یک تگ <img> و عبارت 'صفحه ی نخست' باشد. پس بدین منظور، درون عنصر <li> یک تگ <img> ایجاد می کنیم و مقدار src آن را برابر با "img/home54.png" که نشان دهنده ی آیکن 'خانه' می باشد، قرار می دهیم و سپس عبارت 'صفحه ی نخست' را اضافه می کنیم . در قسمت های قبلی بسته ی آموزشی 'طراحی یک فروشگاه اینترنتی' نشان داده شد که چطور می توان آیکن ها را از اینترنت دانلود کرد و تغییرات لازم را بر روی آنها به وجود آورد، لذا در اینجا به این موضوع نمی پردازیم...

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

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

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

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

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

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

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

1.  طراحی منو ها و قرار دادن آیکن در آنها.
2. قرار دادن نوشتار مربوط به هر منو در کنار آیکن.

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

آنچه که در قسمت 'طراحی منوی فروشگاه بخش 3' خواهید آموخت

در قسمت 'طراحی منوی فروشگاه 3' موارد زیر آموزش داده خواهند شد:

1. آموزش طراحی زیر منو برای منوی اصلی در سطح متوسط.
2. آموزش نحوه ی صحیح استفاده از پوزیشن های relative و absolute.
3. آموزش استفاده از عناصر <ul> و <li> تو در تو برای ایجاد زیر منو.

1.آموزش طراحی زیر منو برای منوی اصلی در سطح متوسط

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

 اگر به زیر منوی اشاره شده در عکس بالا دقت کنید، این زیر منو درواقع یک <div> است که از سمت چپ، تا سمت راست صفحه گسترده شده است و کل صفحه را پوشش می دهد. در ابتدای کار قصد داریم این عنصر <div> را ایجاد کنیم.

برای ایجاد این عنصر <div>، فایل index.php را باز کرده تا بتوانیم شروع به نوشتن کدهای مورد نظر کنیم. سپس بعد از <div> منو، یک عنصر <div> ایجاد می کنیم و نام id آن را 'menu1' قرار می دهیم و استایل آن را به صورت زیر تعریف می کنیم:

<div id="menu1" style="width:100%; height:37px; background:#006;>

نکته ی مهمی که در اینجا لازم است به آن توجه کنیم، از این قرار است که باید پوزیشن(position) این <div> را به صورت 'absolute' قرار دهیم. پس کد بالا به صورت زیر در خواهد آمد:

 با رفرش(refresh) کردن صفحه ی مورد نظر، عنصر <div> که آن را ایجاد نمودیم، ظاهر خواهد شد و به صورت زیر در خواهد آمد:

اکنون یک سوال به وجود می آید و آن عبارت است از اینکه، چرا در کدهای بالا، مقدار position را برابر با 'absolute' قرار دادیم؟

دلیل اینکه در قسمت بالا مقدار 'position' را به صورت absolute انتخاب کردیم، این است که...

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

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

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

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

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

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

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

1. نحوه ی طراحی یک زیر منو برای منوی اصلی.
2. نحوه ی طراحی عناصر درون این زیر منو.

آنچه که در قسمت 'طراحی منوی فروشگاه  4' خواهید آموخت

در قسمت 'طراحی منوی فروشگاه 4' موارد زیر آموزش داده خواهند شد:

1. آموزش مخفی کردن زیرمنوها به هنگام باز کردن صفحه، با استفاده از دستور display.
2. آموزش استفاده از جی کوئری برای ساختن زیر منوها به صورت پیشرفته.
3. آموزش استفاده از دستور include برای الحاق کردن یک فایل php به فایل کنونی.
4. آموزش نحوه ی صحیح اضافه کردن پلاگین جی کوئری به صفحه ی مورد نظر.
5. آموزش نحوه ی صحیح وارد کردن کدهای جی کوئری و جاوااسکریپت به صفحه مورد نظر.
6. آموزش استفاده از دستورهای hover و slideDown در متحرک سازی زیرمنوها.
7. آموزش نحوه ی صحیح بستن زیر منوها به هنگام خارج کردن موس، از آنها.

 1.آموزش مخفی کردن زیرمنوها به هنگام باز کردن صفحه، با استفاده از دستور display

همان طور که در تصویر زیر مشاهده می نمایید،بعد از اضافه کردن زیرمنو ها به منوهای 'گوشی همراه' و 'لپ تاپ'، این زیر منو ها، بر روی یکدیگر قرار می گیرند:

 همان طور که می دانید، هنگام باز کردن صفحه ی مورد نظر، هیچ زیر منویی نباید نمایش داده شود، و تنها هنگامی که اشاره گر موس را بر روی منو ها قرار می دهیم، این زیر منو ها باید نمایش داده شوند. به همین دلیل باید خصوصیت display را برای <div> بنفش رنگ، برابر با 'none' قرار دهیم:

 و همچنین خصوصیت display را برای <ul> هایی که زیر منوها را دربر گرفته اند، برابر با 'none' قرار می دهیم:

 اکنون، با رفرش(refresh) کردن صفحه، خواهید دید که مقدار display برای بخش مربوط به زیرمنو، برابر با 'none' شده است و دیگر در صفحه نمایش داده نمی شود...

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

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

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

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

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

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

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

1. نحوه ی مخفی کردن زیر منوها به هنگام باز کردن صفحه.
2. نحوه ی اضافه کردن دستورات جی کوئری مربوط به باز شدن منو.
3. نحوه ی متحرک سازی زیر منو ها با استفاده از دستورات جی کوئری.

آنچه که در قسمت 'طراحی منوی فروشگاه 5' خواهید آموخت

در قسمت 'طراحی منوی فروشگاه 5' موارد زیر آموزش داده خواهند شد:

1. نحوه ی حل مشکل محو شدن زیرمنوها، با حرکت موس از روی منوها به سمت زیرمنو.
2. نحوه ی حل مشکل محو شدن <div> دربر دارنده ی زیر منو، با خارج کردن موس از قسمت منو.
3. نحوه ی حل مشکل ایجاد شدن <div> زیر منو برای منوی 'صفحه  نخست'.
4. نحوه ی حل مشکل محو نشدن <div> زیر منو، با حرکت موس از دیگر منوها به منوی 'صفحه نخست'. 
5. نحوه ی تبدیل اشاره گر موس به علامت 'دست' (poiner) به هنگام رفتن بر روی منو.
6. نحوه ی تبدیل خط جداکننده ی منوها به یک رنگ دیگر، به هنگام رفتن بر روی منوی مربوط به آن.

6.نحوه ی تبدیل خط جدا کننده ی منوها به یک رنگ دیگر، به هنگام رفتن بر روی منوی مربوط به آن 

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

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

1. ابتدا با دوبار کلیک کردن، علامت قفل را محو کنید.
2. گزینه ی سطل رنگ را از سمت چپ انتخاب کنید.
3. با کلیک بر روی عکس مورد نظر، رنگ آن را تغییر دهید.
4. عکس مورد نظر را ذخیره کنید.

 بعد از انجام موارد ذکر شده، دوباره وارد صفحه ی script.php می شویم و کد مشخص شده ی زیر را اضافه می کنیم:

 در دستور خط 5، عبارت 'this' به سلکتور مشخص شده در خط شماره 3 اشاره می کند و...

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

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

نقطه ی شروع بحث بالا (طراحی منوی فروشگاه 5) در ویدئو: 17:28 

جلسه ی دوم بسته ی آموزشی طراحی یک فروشگاه اینترنتی-طراحی منوی فروشگاه 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