50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت لیست آبشاری داینامیک با 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 .

فایل index.php

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

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

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

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

فایل ajaxData.php

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

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

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

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۸)

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

  1. میلاد ۲۱ مهر ۱۳۹۹

    باسلام
    در قطعه کد بالا هنگام ارسال فرم به دیتابیس شماره id ها ارسال می شود و مثلا نام کشور و شهر ارسال نمیگردد بجای آن شماره مربوطه ارسال میگردد.
    ممنون میشم راهنمایی کنید برای ارسال خود متن به دیتابیس چه تغییری را در کد js یا ajaxphp باید اعمال کرد.
    سپاس

    پاسخ
    1. حسن شفیعی ۲۱ مهر ۱۳۹۹

      سلام.
      برای دریافت نام به جای آیدی اینجا var countryID = $(this).val(); به جای val() از html() استفاده کنید

      پاسخ
      1. میلاد ۲۱ مهر ۱۳۹۹

        تشکر از پاسخ دهی
        با تغییرات گفته شده هنگام انتخاب فیلد اول فیلد های دوم و سوم از دیتابیس فراخوانی نمیشن.بنظرم توی فایل ajaxdata.php هم باید تغییراتی اعمال بشه.تغییرات دیگه ای نباید داد؟

        پاسخ
      2. حسن شفیعی ۲۱ مهر ۱۳۹۹

        در کد php در کویری های sql به جای country_id از country_name و مشابه آن برای state و cities ها استفاده کنید.

        پاسخ
      3. میلاد ۲۱ مهر ۱۳۹۹

        سپاس به این ترتیب در داخل دیتابیس هم foreign key باید براساس name نوشته شود برای جداول وابسته.
        یک سوال دیگ اگر بخواهیم با انتخاب یک کشور ۵ فیلد مجزا استان و ۵ فیلد مجزا شهر مربوطه قابل انتخاب باشه کد ایجکسش چجوری میشه؟ اگر امکانش هست توضیح بفرمایید

        پاسخ
      4. حسن شفیعی ۲۱ مهر ۱۳۹۹
      5. میلاد ۲۲ مهر ۱۳۹۹

        در آموزش اشاره شده مطلبی درخصوص تعدد سلکت باکس ها(نه تعدد موارد انتخابی داخل سلکت باکس!)نیست.کد رو نمیخام ازتون در حد راهنمایی باشه کافیه

        پاسخ
  2. azad ۸ مهر ۱۳۹۸

    سلام.وقت بخیر.بعد ازاینکه کاربر درنهایت از لیست ها شهر رو انتخاب کرد چگونه بعد از زدن دکمه سرچ(باتن) اطلاعات انتخابی کاربر را به صفحه دیگه منتقل کنیم تا بتونیم عمل سرچ رو انجام بدیم؟ با نوشتن کدی مثل [‘a=$_GET[‘state$ در صفحه سرچ کار نمیکنه و خطا میده…لطفا راهنماییم کنیم

    پاسخ
    1. حسن شفیعی ۹ مهر ۱۳۹۸

      سلام. ممنون
      باید کل این لیست های انتخابی را داخل یک تگ form با action=”file.php” و method=”GET” قرار بدید تا در فایل file.php بتونید بصورت $_GET[‘state’] این مقادیر را دریافت کنید؛
      متغییر GET و POST در PHP
      دریافت اطلاعات فرم در PHP
      موفق باشید.

      پاسخ
      1. azad ۹ مهر ۱۳۹۸

        خیلی ممنون

        پاسخ
  3. محمد ۲۰ خرداد ۱۳۹۸

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

    پاسخ
    1. حسن شفیعی ۲۰ خرداد ۱۳۹۸

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

      پاسخ
      1. محمد ۲۱ خرداد ۱۳۹۸

        مرسی.ببخشید چرا جدولا primary key ندارن؟مشکلی پیش نمیاد بقیه جدولای دیتابیسمو هم طبق این queryها ایجاد کنم؟

        پاسخ
      2. حسن شفیعی ۲۱ خرداد ۱۳۹۸

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

        پاسخ
      3. محمد ۲۱ خرداد ۱۳۹۸

        آها مرسی

        پاسخ
  4. fatemeh ۱۷ شهریور ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۱۷ شهریور ۱۳۹۷

      سلام . خوشحالم مفید واقع شده . موفق باشید.

      پاسخ
  5. arman ۳ تیر ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۳ تیر ۱۳۹۷

      سلام . خواهش می کنم. خوشحالم که مفید واقع شده . موفق باشید.

      پاسخ
دوره های آموزشی

دانلود رایگان کتاب آموزش PHP

صفر تا صد PHP و MySQL را یکجا یاد بگیرید
همین الان دانلود کن
نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
close-link