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

تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX


تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

در این آموزش قصد داریم به شما نحوه تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX به همراه سورس کد کامل در اختیار شما قرار بدیم.

Drag and drop (کشیدن و رها کردن) یک قابلیت راحت UI برا کاربران است زمانی که بخواهند المان ها صفحه را مدیریت کنند.

بخصوص, زمانی که تصاویر را در یک گالری نمایش می دهیم و به کاربران اجازه حرکت دادن آن ها را می دهیم. پس قابلیت drag&drop بهترین گزینه است.

پلاگین های زیادی نمایش گالری تصاویر با قابلیت مرتب سازی مجدد وجود دارند.

در این مثال, قصد داریم به شما نحوه پیاده سازی تغییر ترتیب تصاویر گالری را با کدهای سفارشی php و جی کویری بوسیله کتابخانه jQuery UI نشان بدیم.

 

تصاویر گالری بصورت داینامیک از طریق دیتابیس خوانده می شود. برای هر تصویر کارت-مانند قابلیت draggable بودن برای تغییر ترتیب آن ست می شود.

همنیکه مرتب سازی دوباره تکمیل شد, ترتیب آن با کلیک روی دکمه save در دیتابیس بروزرسانی می شود.

 

کد نمایش گالری تصویر

این کد شامل HTML برای نمایش گالری به کاربر استفاده شده است. این تصاویر از دیتابیس واکشی (fetch) و در گالری نمایش داده شده اند.

کد PHP برای واکشی نتایج دیتابیس و تکرار آرایه نتایج تصاویر برای ایجاد کد HTML برای نمایش عکس استفاده شده است.

مرتب سازی دوباره با drag-drop جی کویری

اسکریپت زیر به شما نحوه فعال کردن ویژگی drag&drop (کشیدن و رها کردن) برای تغییر موقعیت تصاویر در UI گالری را نشان می دهد.

حتما بخوانید  افزودن و حذف تصویر با AJAX در جی کوئری

با فراخوانی متد sortable() در jQuery UI می توانیم قابلیت مرتب شدن ره با المان های تصاویر اضافه کنیم.

هنگام مرتب سازی, ایندکس رها کردن (drop) تصویر در یک متغییر ذخیره می شود. از این مقدار بعدا برای استفاده در شرط به منظور بهینه سازی روند ایجاد و افزودن id تصویر به آرایه بهره می بریم.

برای مثال, اگر مرتب سازی بین سه تصویر اول انجام شود, به جای اینکه کل سطرهای تصاویر در دیتابیس بروزرسانی شود, تنها این رکوردها آپدیت می شود

بعد از تغییر ترتیب تصویر, رویداد کلیک روی دکمه Save یک درخواست AJAX را ارسال می کند. در این درخواست, کد PHP به منظور آپدیت ترتیب تصاویر  در دیتابیس فراخوانی می شود.

کد PHP برای ذخیره ترتیب تصاویر در دیتابیس

این کد PHP برای ذخیره و بروزرسانی(Update) ترتیب تصویر در دیتابیس استفاده شده است. این فایل PHP توسط درخواست AJAX با ارسال آی دی (id) تصویری که قرار است مرتب شود, فراخوانی می شود.

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

اسکریپت دیتابیس

آدرس تصاویر داخل جدول tbl_images ذخیره می شود. فایل SQL زیر به شما دستورات لازم برای ساخت جدول و داده های dump شده را نشان می دهد.

برای اجرای اسکریپت تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

کافیست که کد زیر را در فایل.sqlذخیره و در دیتابیس مورد نظر import کنید.

خروجی تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

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

تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX

امیدوارم از آموزش تغییر ترتیب تصاویر گالری بوسیله drag&drop با PHP و AJAX نهایت استفاده را برده باشید.

برای دانلود سورس کد کامل از باکس دانلود زیر استفاده کنید.

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

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

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

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

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

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

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



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

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

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

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

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

بخش کاربران

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

دانلود کتاب

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