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

ساخت ادیتور آنلاین کد در PHP


ساخت ادیتور آنلاین کد در PHP

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

استفاده از ادیتور آنلاین کد تاحد زیادی تلاش ما را برای دانلود و نصب نرم افزار (xampp,wamp,..) به منظور راه اندازی محیط لوکال برای اجرای کدها را کاهش می دهد. همچنین برای عیب یابی تکه کدها بصورت مستقیم بسیار مفید خواهد بود.

 

در این مقاله آموزشی, یک ادیتور آنلاین کد را برای اجرای اسکریپت های PHP را ایجاد می کنیم. من از API سرویس CodeMirror برای ساخت UI به منظور نوشتن و ویرایش آنلاین کد استفاده می کنم.

CodeMirror یکی از کتابخانه های محبوب و پراستفاده جاوااسکریپت برای ساخت ویرایشگر آنلاین کد است.

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

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

 

در مثال ساخت ادیتور آنلاین کد در PHP , یک ویرایشگر نمایش داده می شود.در ابتدا این ایدیتور با یک اسکریپت ساده Hello World بارگذاری می شود.

این کد در پنجره ادیتور قابل ویرایش است و اکشن Run کد فعلی را از ادیتور دریافت می کند.همچنین می توانیم با کلیک روی Clear و Refresh پنجره ویرایشگر را پاک و از نو لود کنیم.عملیات Run, Refresh, Clear با استفاده از Ajax در jQuery انجام می شوند.

 

تبدیل Html Textarea به ویرایشگر کد آنلاین

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

CodeMirror را دانلود و فایل های لازم را به صفحه HTML اضافه کنید.

با اضافه کردن این کتابخانه, یک فرم HTML با المنت textarea می تواند به یک پنجره ویرایشگر کد تبدیل شود.

کد تایپ شده در این پنجره ادیتور می توانید بر اساس نوع زبان برنامه نویسی انتخاب شده به شکل های مختلف نمایش داده شود.

برای هر mode , کتابخانه فایل های جاوااسکریپت جدا را فراخوانی می کند. در این مثال, فایل های جاوااسکریپت استفاده شد برای زبان هایی مثل PHP,css,XML و غیره را می بینید.

با کلیک روی دکمه Run , کد داخل ویرایشگر با اسکریپت jQuery اعتبارسنجی و در سمت سرور اجرا می شود و در نهایت نتیجه در زیر ادیتور نمایش داده می شود.

این کد javascript برای اجرای CodeMirror با یک سری از گزینه های مشخص شده برای تبدیل المنت textarea به یک ویرایشگر کد استفاده شده است.

اجرای کد با ادیتور آنلاین توسط jQuery Ajax

در ابتدا, نمونه ادیتور با تنظیمات مشخص شده توسط توابع کتابخانه ساخته می شود. با کلیک ر.ی دکمه Run , کد تایپ شده با تابع getValue() خوانده می شود. این کد توسط درخواست AJAX به فایل PHP ارسال و در یک فایل سمت سرور رایت می شود.

بعد از قرار دادن کد موجود در ادیتور در یک فایل php به نام مثلا code-editable.php , یک درخواست دیگر AJAX در تابع بازگشتی complete() ارسال می شود.

در دومین درخواست AJAX , فایل code-editable.php در دسترس خواهد بود. با اجرای کدهای موجود در این فایل, خروجی مورد انتظار به عنوان پاسخ ajax در فرمت HTML برگشت داده می شود.

با کلیک روی دکمه Clear , کدهای نوشته شده در ادیتور پاک می شود. با کلیک روی دکمه Refresh نیز عملیات reload نیز برای لود ادیتور با اسکریپت اولیه Hello World اجرا می شود.

حتما بخوانید  بررسی وجود یوزرنیم در ثبت نام با php و ajax

اسکریپت PHP برای قراردادن کدها در یک فایل داینامیک

در این اسکریپت PHP , کد موجود در ادیتور توسط درخواست  AJAX دریافت می شود. سپس محتویات کد در یک فایل قرار داده می شود.

توابع فایل در PHP برای ساخت اشاره گر (pointer) به منظور نوشتن کدها داخل آن استفاده می شود. بعد از قرارا دادن کد داخل فایل, اشاره گر فایل نیز بسته می شود.

زمانی که این مثال را روی محیط لوکال اجرا می کنید, مطمین باشید که فایل code-editable.php پرمیشن write را داشته باشد (برای لینوکس)

خروجی ساخت ادیتور آنلاین کد در PHP

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

ساخت ادیتور آنلاین کد در PHP

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

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

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

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

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

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

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

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

مطالب زیر را حتما بخوانید

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

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

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

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

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

مجوزهای ما


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

دانلود کتاب

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