طراحی سایت, ساخت ربات تلگرام, آموزش 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 .

حتما بخوانید  مرتب سازی سطرهای MySQL با PHP

فایل index.php

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

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

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

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

فایل ajaxData.php

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

حتما بخوانید  ایجاد lazy load در جی کوئری

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

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

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

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

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

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

2 پاسخ به “ساخت لیست آبشاری داینامیک با php و jquery”

  1. arman گفت:

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

    0

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

جدیدترین آموزش های آنلاین



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

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

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

افزایش امنیت سایت

مجوزهای ما

logo-samandehi

بخش کاربران

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

دانلود کتاب

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