چگونه : محتویات صفحه را درجا با HTML5,jQuery و PHP ویرایش کنیم ؟

تبلیغات
دوره آموزش طراحی وب تبریز
کانال تلگرام فتولیا

مشخصات HTML5 شامل یک امکان جدید به نام  contentEditable است . این خصیصه که در اکثر مرورگرهای بروز پشتیبانی می شود ما را قادر می سازد بتوانیم محتویات صفحه را در جا تغییر داده و ذخیره کنیم .شما می توانید بخش های مختلفی از صفحه را تعیین کنید که به صورت درجا قابل ویرایش باشند.راه استفاده از آن نیز ساده است و کافیست خصیصه  contentEditable را به تگ مورد نظر اعمال کنید . این خصیصه را می توان به همه نوع تگ html نیز نسبت داد مثلا تصاویر،لیست ها و حتی ویدیو البته فقط متون داخل این تگ ها قابلیت ویرایش دارند و بقیه اجزا را فقط می توان حذف کرد.

محدودیت دیگر  contentEditable این است که امکانی برای ذخیره متن ویرایش شده در اختیارمان قرار نمی دهد برای همین  از کتابخانه جاوااسکریپت jQuery و زبان برنامه نویسی PHP و پایگاه داده MySQL برای این کار استفاده می کنیم.

مرورگرهایی که خصیصه فوق را پشتیبانی می کنند :  Internet Explorer 6+, Firefox 4+, Safari 3.2+, Chrome 11+, و Opera 10.6+

در تصویر زیر نتیجه نهایی کارمان را مشاهده می کنید :

 

 

اجازه بدید با کدهای HTML شروع کنیم :

 

بوسیله کد بالا یک #editable ایجاد کردیم که حاوی متن مورد ویرایش ماست ،با یک دکمه برای ذخیره تغییرات . همچنین از یک div دیگر با آی دی #status برای نمایش پیام برگشتی سرور(PHP) استفاده کردیم

در همین رابطه :   خصوصيات عمومي HTML 5

در بخش CSS شما می توانید هر استایل دلخواهی که خواستید به صفحه اعمال کنید ولی نکته مهم این است که دکمه ذخیره تغییرات در ابتدا باید مخفی باشد چون می خواهیم فقط وقتی روی بخش  #editable کلیک شد ظاهر شود

 

می توانید به بخش های دیگری هم که می خواهید طبق سلیقه خودتان css اضافه کنید .

حالا بریم سراغ کدهای jQuery

 

 

کد بالا در هر جایی که روی div قالب ویرایش کلیک شود دکمه ذخیره را هم نمایان می کند و اگر در هر جایی غیر از آن کلیک شود این دکمه را مخفی می کند.

حالا بایستی داده ها را به صورت ایجکس به سرور بفرستیم تا در دیتابیس ذخیره شوند

 

در همین رابطه :   دانلود : کتاب آموزش فارسی HTML5

کار کد بالا این است که داده ها را از  #editable بگیرد و به send.php به صورت post ارسال کند.اگر داده ها با موفقیت ارسال شوند بوسیله php دریافت شده و در دیتابیس ذخیره می شوند.وقتی این کار انجام شود مقدار ۱ توسط php برگشت داده می شود.بوسیله این مقدار برگشتی ما می توانیم تشخیص دهیم که داده ها با موفقیت وارد دیتابیس شده اند و پیام ویرایش موفقیت آمیز را به کاربر در  #status نمایش می دهیم و الا بر عکس

محتویات فایل php

 

کد php بالا داده ها را می گیرد و مقدار دیتابیس رو با داده جدید بروز می کند.

همانطور که در بالا دیدید داخل تگ  #editable از متن ثابت استفاده کردیم ولی می توانید این مقدار را از دیتابیس بگیرید و نمایش دهید تا چرخه ویرایش کامل شود . برای دریافت و نمایش محتویات دیتابیس از کد زیر استفاده کردیم

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

در همین رابطه :   وارد کردن اطلاعات از Excel به MySQL با PHP

[wpdm_file id=1]

پیش نمایش

پاسخ دهید

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

More in Ajax, HTML 5, jQuery, PHP
چگونه : در PHP ساده و سریع تر با MySQL کار کنیم؟

سلام دوستان موضوعی که در این بحث می خواهیم در موردش صحبت کنیم ،معرفی کلاس آماده ای برای کار با...

Close