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

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

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

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

1.  نحوه ی نمایش پیغام هایی است که حدف محصول یا افزودن محصول  به سبد خرید را به کاربر اعلام می کند. 

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

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

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

توضیح مختصر:

 در این قسمت به تکمیل سبد خرید و دکمه ی ادامه ی خرید می پردازیم و همچنین به نحوه ی ثبت نام کاربران خواهیم پرداخت.

تکمیل سبد خرید

 می خواهیم برگردیم و یک بار دیگر سایتمان را ببینیم، تا بفهمیم که هنوز چه کارهایی را انجام نداده ایم . و ببینیم که آنها را چطور می توان انجام داد. 

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

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

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

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

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

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

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

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

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

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

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

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