طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت لیست آبشاری داینامیک با php و jquery


ساخت لیست آبشاری داینامیک با php و jquery

در این آموزش قصد داریم به شما نحوه ساخت لیست آبشاری (dropdown) چندگانه (multiple) داینامیک با php و jquery ، ajax و mysql را نشان بدیم .

ساخت لیست آبشاری داینامیک بیشتر برای نمایش لیست های انتخابی استان و شهر استفاده می شود . بنابراین در آموزش ساخت لیست آبشاری داینامیک با php و jquery ، قصد پیاده سازی لیست بازشو ی کشور و استان توسط php و jquery ، ajax و mysql را داریم .

بر اساس تغییر کشور و استان (state) ، لیست های شهر (city) و استان state بدون آن که صفحه دوباره بارگذاری (refresh) شود ، با استفاده از php و jquery ، ajax و mysql از دیتابیس خوانده و بروزرسانی خواهند شد

ساخت لیست آبشاری داینامیک با php و jquery

در ابتدا ، لیست آبشاری کشور ، اسامی تمام کشور ها را نمایش خواهد داد . زمانی که یک کشور انتخاب شد ، استان های مورد نظر از دیتابیس mysql خوانده (fetch) و در لیست آبشاری استان نمایش خواهند داد . مشابه همان ، زمانی که استان دلخواه انتخاب شد ، همه شهر های مرتبط به آن از دیتابیس mysql خوانده و در لیست آبشاری شهرها نمایش داده می شود.

ساخت جداول دیتابیس

یک دیتابیس بالفرض location_db بسازید . location_db دارای سه جدول countries ، states و cities خواهد بود . جدول states یک relation با جدول countries و جدول cities یک relation با جدول states دارد . برای ربط دادن جدول ها به هم باید با مفاهیم پایه طراحی دیتابیس آشنا باشید . به هر حال سورس کامل آن در انتهای مقاله قابل دانلود خواهد بود .

جدول countries :

این جدول شامل تمام اطلاعات کشورها است . کوئری SQL ساخت جدول countries به صورت زیر است :

جدول states :

این جدول شامل تمام اطلاعات استان ها و یک فیلد country_id به عنوان FOEIGN_KEY است . کوئری SQL ساخت جدول states به صورت زیر است :

جدول cities :

این جدول شامل تمام اطلاعات شهر ها و یک فیلد state_id به عنوان FOEIGN_KEY است . کوئری SQL ساخت جدول cities به صورت زیر است :

فایل dbConfig.php

این فایل برای اتصال به دیتابیس mysql استفاده می شود . نحوه اتصال به دیتابیس mysql در php .

حتما بخوانید  تغییر قالب با jQuery

فایل index.php

این فایل شامل کتابخانه jQuery و کد های javaScript ، HTML و PHP است .

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

برای کپی صحیح و کامل کدها ، دابل کلیک کرده تا وارد محیط سفید و کپی شوید در غیر اینصورت امکان دارد اجرای کدها با مشکل روبرو شود

از کد php و html زیر برای نمایش استان و شهر ها بر اساس کشور انتخابی استفاده شده است .

فایل ajaxData.php

این فایل با درخواست اجکس اجرا می شود و در این فایل اطلاعات شهر یا استان بر اساس مقدار country_id یا state_id از دیتابیس خوانده می شود . همچنین در صورت اجرای موفق ، کد های HTML به تابع success اجکس برگشت داده می شود .

حتما بخوانید  اکسپورت مخاطبان بصورت vCard با PHP

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

برای دانلود سورس کد کامل ساخت لیست آبشاری داینامیک با php و jquery + دیتابیس از قسمت زیر اقدام کنید

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

موفق و پیروز باشید.

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

دیدگاه کاربران

avatar
3 دیدگاه ها
6 پاسخ ها
0 دنبال کننده ها
 
دیدگاه با بیشترین پاسخ
پرطرفدارترین دیدگاه ها
4 تعداد نویسندگان دیدگاه
محمدحسن شفیعیfatemeharman نویسنده های اخیر دیدگاه
محمد
محمد

سلام.ببخشید واسه قسمت دیتابیس فقط کپی کردن کدای ۳تا جدول کافیه یا باید کارای دیگه ای روش اجرا شه؟یکم رو ارتباط جدولا مشکل دارم ممنون میشم کمکم کنید

fatemeh
fatemeh

سلام
واقعا عالی بود اجرتون با اقا امام زمان

arman
arman

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

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه

تخفیف 150 هزار تومانی برای سورس فروشگاهی دیجی کالا تا پایان خردادماه - کد تخفیف : np150
ثانیه
دقیقه
ساعت
روز
خرید محصول