https://virgool.io/feed/@salars توسعه دهنده ای از عقب و جلو و فراتر از آن fa 2026-04-14 18:36:19 https://files.virgool.io/upload/users/1317815/avatar/avatar.png?height=120&width=120 https://virgool.io/@salars https://virgool.io/@salars/laravel-form-builder-part-one-pzwtokziyf4i سلام مجدداین سومین پست و دومین آموزش من در ویرگوله و میخوام 0 تا 91% ساخت یه فرم ساز در لاراول رو به اصولی ترین روش ممکن بهتون آمیزش بدم :) (این آموزش مرتبط با آموزش قبلی منه) البته با این آموزش میتونید تو دیگر زبان ها و فریمورک ها و ... هم به ساخت و ساز بپردازید و دشواری نخواهید داشت.حالا چرا 91؛ چرا 100 نه؟ چون 9 درصد باقی مانده مربوط به ساخت فرانت کاربر و ادمین پروژه است و از شما چه پنهون حوصله کار با جی اس و سی اس اس و اچ تی ام ال رو زیاد ندارم و درست هم نیست همه چیز رو بگم! ماهی گیری رو یادتون میدم ماهی بگیرید دیگه!طراحی دیتابیس؛ سر آغاز خلقتطراحی دیتابیس مهمترین بخش هر پروژه و این پروژه است؛ وقتی دیتابیس رو اصولی طراحی کنید در روند توسعه هم لذت خواهید برد و هم درگیر پیچیدگی های نامتعارف یکهویی نخواهید شد. فلذا قبل از شروع هر پروژه ای زمان و امکانات خوبی رو صرف این قسمت از پروژه کنید که حکم تخمدان پروژه شما رو داره و اسپرم هایی که در آینده خواهید فرستاد باید وارد همین میدان بشن - جداولما 4 جدول خواهیم داشت?جدول نخست : forms - همانطور که از اسمش مشخصه فرم های ما رو نگه خواهد داشت--- ساختار:idtitle - عنوان فرم (varchar)is_active - فعال / غیرفعال بودن فرم (boolean)is_trash - وضعیت سطل آشغال برای فرم (boolean)created_at - زمان ایجاد (timestamp)updated_at - زمان بروزرسانی (timestamp)?جدول دوم: forms_meta - همانطور که از اسمش مشخصه اطلاعات جانبی فرم های ما رو نگه خواهد داشت--- ساختار:form_id - ای دی فرم (int)display - فیلد ها و خصیصه های فرم (json)confirmations - پیام یا اکشنی که بعد از ارسال فرم روی خواهد داد (json)notifications - اعلان هایی که فرستاده خواهد شد (json)?جدول سوم: forms_entry - همانطور که از اسمش مشخصه ورودی فرم های ما رو نگه خواهد داشتدر این جدول، میتونید فیلد های مخصوص به خودتون رو اعم از فیلد های مخصوص پرداخت و ای دی ابجکت های دیگه و ... رو اضافه کنید؛ اینجا توسعه دست خودتون هست که چی لازم دارید من خیلی ساده این بخش رو میرم جلو تا آموزش دچار پیچیدگی نشه.idform_idis_read - برای اینکه ورودی خوانده شده یا نه (boolean)ip - ای پی کاربرsource_url - ادرس صفحه ای که فرم سابمیت شدهuser_agent - یوزر ایجینتcreated_by - ایجاد شده توسط ؟ میتونه ای دی کاربر لاگین کرده باشهstatus - وضعیت created_at updated_at?جدول چهارم: forms_entry_meta - مقادیر ورودی های فرم های ما رو نگه خواهد داشتform_identry_id - ای دی ورودیmeta_key - کلید فیلد ورودی (varchar)meta_value - مقادیر فیلد ورودی (longtext)توضیحات دیتابیسیخب جدول هامون رو ساختیم؛ شما هم بسازید تا بریم سمت معرفی چندی از مقادیردر جدول forms_meta ما یک ستون داشتیم با اسم display میخوام این ستون و چیزایی که توش قراره وارد بشن رو بهتون توضیح بدم مهمترین ستون هم همین ستونهیه نمای کلی از مقادیر ستونtitle : عنوان فرانتی فرم ما خواهد بودdescription : توضیحات فرانتی فرم ما خواهد بودbutton : دکمه ثبت فرم ماست که فقط متن دکمه رو نگه میداره شما میتونید خصیصه های دیگه بهش بدید مثل کلاس یا اتریبیوت های خاصid : ای دی فرمfields : یه آرایه از فیلد های ما رو در خودش دارهما تو این مثال 9 تا تایپ تو ارایه fields داریم که 4 تاش فیلد نیست و به نوعی کاستوم ویو خواهند بود بنا به تایپی که دارن و بقیه فیلد خواهند بود با انواع متفاوت مثل اینپوت ها / سلکت باکس ها / فیلد های خاص سفارشی.اینجا به طور مثال؛ ما یک ابجکت داریم که توش چندین خصیصه وجود دارهنخست type که مشخص میکنه فیلد ما تایپش چیه اینجا input قرار دادیمدوم id که میره میشینه رو ورودی های فرم ما و name ما سمت html خواهد بود (باید یونیک باشه تو لیست خودش) سوم label که لیبل فیلد خواهد بودچهارم validation که وظیفه ولیدیت فیلد ها رو بر عهده داره (ولیدیشن های لاراول رو بهش میدیم)پنجم errorMessage که پیام خطای فیلد ما رو نگه میدارهششم formId که ای دی فرم رو نگه میدارههفتم description که توضیحات اضافی فیلد رو نگه میدارههشتم inputType که نوع اینپوت رو مشخص میکنه مثلا text / numberنهم cssClass که به فیلد یا به مادر فیلد کلاس سی اس اس اضافه میکنهدهم noDuplicates که مشخص میکنه آیا ورودی این فیلد باید یونیک باشه یا نهیازدهم defaultValue که میتونید مقدار از پیش تعین شده رو بدیددوازدهم choices که تو تایپ select به کارمون میاد برای ایجاد optionکه اینجا میتونید اون choices ها رو ببینید؛ مابقی خصیصه ها مشابه فیلد قبلیهاینجا هم یه فیلد سفارشی هستش که قراره توش چیزای باحال بزاریم تا انتخاب کننستون confirmationsیه جیسون که توش کانفیرمیشن های فرم قرار میگیره این بخش تو منیجمنت و ساخت پنل ادمین فرم ساز بدرد میخورهid : یه ای دی یونیکname : عنوان کانفیرمیشنisDefault: دیفالت / غیر دیفالت بودن اگر تعیین نکرده باشن چیزیtype : نوع پاسخ که میتونه انواع مدل باشه اینجا من 2 مدل رو قرار دادمmessage : پیغام نمایشی بعد از سابمیتurl: ادرس انتقال بعد از سابمیت موفقیت امیز فرم اگر تایپ ریدایرگت بودستون notificationsیه جیسون که توش نوتیفیکیشن های فرم قرار میگیره این بخش تو منیجمنت و ساخت پنل ادمین فرم ساز بدرد میخوره که کاربر ادمین انتخاب کنه به چه کسانی چه چیز هایی در چه ایونتی (مثلا بعد از ثبت فرم) اعلان بره به صورت ایمیلی / پیامکی یا دیگر روش ها.خصیصه isActive مشخص میکنه که این اعلان فعاله یا نه خصیصه to میگه به چه کسانی فرستاده بشه که اینجا متغیر گذاشتیم و قراره به ایمیل ادمین برهخصیصه name که عنوان ناتیفیکیشن سمت مدیریتهخصیصه event که میتونید ایونت های خودتون رو داشته باشید اینجا ایونت form_submission هست که اشاره میکنه به بعد از ثبت فرم.خصیصه toType که نوع ارسال رو مشخص میکنه که به ایمیل باشه یا چیزای دیگه که میتونید تعریف کنید و توسعه بدیدخصیصه subject که عنوان اینجا ایمیل ارسالیهخصیصه message که چه پیغامی ارسال بشه اینجا متغییر همه فیلد ها رو گذاشتیم که همه فیلد ها حالا تو یه قالب از پیش تعین شده ارسال بشهخب تا اینجا رو داشته باشید؛ در قسمت دوم میریم برای توسعه اپ Salar Sadeghi Salar Sadeghi Tue, 17 May 2022 15:43:00 +0430 https://virgool.io/laravel-community/%DA%A9%D8%AF%D9%87%D8%A7%DB%8C-%DA%A9%D9%88%D8%AA%D8%A7%D9%87-%D9%88%D8%B1%D8%AF%D9%BE%D8%B1%D8%B3-%D8%AF%D8%B1-%D9%84%D8%A7%D8%B1%D8%A7%D9%88%D9%84-cvnp6xtpqtym وردپرس بخاطر ابزار هایی که داره برای خیلی از کاربرا و همینطور توسعه دهنده ها جذابه و خیلی از کاربر هایی که از وردپرس و ابزارهاش استفاده کردند در یک سیستم اختصاصی هم طبیعتا به دنبال چنین ابزار هایی هستند؛ از قدیم هم گفتند ترک عادت موجب مرض است فلذا بیاید بهشون همون جنسی رو بدیم که میخوان.یکی از این ابزار های پرکاربرد که خیلی از افزونه ها به طور مثال افزونه های صفحه ساز و فرم ساز و ... برای تعامل هرچه بهتر کاربر با محتوا های داینامیک استفاده میکنند "شرت کد" یا "shortcode" نامیده میشه؛ با استفاده از شرت کد ها شما میتونید با یک تکه متن ساختارمند سفارشی یک محتوای داینامیک مثل لیست کاربران امروز یا یک فرم یا یک نوع خاصی از نمایش محتوای رسانه ای یا هر چیز دیگری رو درون محتوای خام مورد نظر لود کنید بدون اینکه کاربر درگیر کد نوشتن و یا این قبیل از کارهای کارگری بشه.چیزی که خواهیم ساخت - نمونهتو این نمونه ای که خواهیم ساخت 2 شرت کد رو میسازیم یکی به اسم GoodImage خواهد بود که افکت جالبی رو برای تصاویر ایجاد میکنه و دیگری GoodText خواهد بود که یه افکت خاصی روی نوشته ما اعمال خواهد کرد با فراگیری همین 2 نمونه میتونید بی نهایت شرت کد با کارکرد های مختلف یادبگیرید و شروع به فکر کردن باهاش کنید.1 - نحوه استفاده از شرت کد توسط کاربر در ادیتور2 - نتیجه کارریجکس / Regexتجزیه طلبی و جدایی خواهی بدون استفاده از ریجکس توسط هر زبان و توسعه دهنده ای بدون شک سرکوب خواهد شد! ما برای جدا سازی و تجزیه متون در اینجا شرت کد ها به ریجکس نیاز اساسی خواهیم داشت و میشه گفت اساسی ترین بخش مان هم همین پترن نویسی درسته! اگر با ریجکس آشنایی ندارید یا ازش درک خوبی ندارید نگران نباشید تو این مورد بخصوص پترن مورد نیازش در اختیارتون قرار میگیره اما فراگیری و درک کردن ریجکس میتونه شما رو از یک توسعه دهنده صرف به یک توسعه دهنده ASS KICKER تبدیل کنه؛ فلذا بعد از این مقاله برید سراغش! یا صبر جمیل کنید خودم دربارش بنویسم %)شروع به کارما 4 کلاس خواهیم داشتکلاس Shortcode : که یه اینترفیس ساده است برای مشخص کردن متد ها و متغیر های ضروری یک کلاس شرت کدکلاس ShortcodeManager: که وظیفه ریجیستر و پارز کردن و جایگذاری رو بر عهده خواهد داشتکلاس GoodImage : که کنترلر و ویو شرت کد good_image رو به عهده خواهد داشتکلاس GoodText : که کنترلر و ویو شرت کد good_text رو به عهده خواهد داشتساختار پوشه بندیهمانطور که مشاهده میکنید یک پوشه Shortcode داریم و یک پوشه List درون پوشه Shortcode؛ پوشه List کنترلر شرت کد های ما را در خودش خواهد داشت.ما 1 پوشه جهت نگه داشتن ویو شرت کد ها خواهیم داشتپوشه shortcode و 2 فایل ویو شرت کد هاآن 4 کلاس میتونن به صورت کنترلر لاراول؟! یا به صورت چیزی که اینجا ایجاد کردیم, ایجاد بشن در اینجا من به صورت ساختاریافته جدا از کنترلر های لاراول ایجادشون کردم و توصیه میکنم جدا از کنترلر لاراول بسازیدشون (کنترلر ها رو بزارید برای route ها بمونن ;) )کلاس Shortcodeیه اینترفیس ساده برای مشخص کردن متد ها و فیلد های ضروری کلاس شرت کد هافایل Shortcode.phpخط نخست درون کلاس، چون بخاطر شیرین کاری پی اچ پی نمیتونیم تو اینترفیس فیلد تعریف کنیم! بجاش یه گتر تعریف کردیم تا زمان ایجاد شرت کد ها مجبور بشیم ایمپلمنتش کنیم.خط دوم درون کلاس، متدی هستش که هر شرت کدی باید داشته باشه و وظیفه گرفتن اطلاعات شرت کد و سپس رندر کردن شرت کد رو داره.کلاس ShortcodeManagerوظیفه ریجیستر و پارز کردن و جایگذاری رو بر عهده خواهد داشتفایل ShortcodeManager.phpدر این کلاس یک ارایه استاتیک به اسم shortcodes رو داریم که وظیفه نگه داری شرت کد های ریجیستر شده ما رو داره.3 متد داریم که به ترتیب: متد parse که وظیفه گرفتن محتوای متنی که توش کد شرت کد قرار گرفته رو میگیره سپس توسط پترنی که برای ریجکس نوشته شده اون رو تجزیه میکنه و گروه بندی میکنه سپس آرایه فرستاده شده توسط تابع preg_match_all رو میگیریم تا بتونیم به لیست شرت کد های استخراج شده دسترسی داشته باشیم.این کد شرتکد GoodImage ماست که در محتوا مثلا در ادیتور توسط کاربر یا توسط ویرایشگر متن وارد شده:[good_image url=&quothttps://wallpaperaccess.com/full/893945.jpg,https://wallpapercave.com/wp/wp3851968.jpg&quot name=&quotYup, I DID IT&quot]در اینجا good_image همان نام کد شرتکد ماست که در ریجکس در گروه name قرار گرفتهاتریبیوت های ما که همان پارامتر های شرتکد ها هستند هم به صورت key="value" درج شدند.برای پارز کردن این اتریبیوت ها که اتریبویت هایی به مانند اتریبیوت های html هستند از کلاس SimpleXMLElement استفاده کردیم و اتریبیوت استخراج شده در تابع preg_match_all رو به همان صورتی که استخراج شده رو با یک المنت فرضی به constructor کلاس SimpleXMLElement پاس میدیم.سپس اتریبویت های پارز شده توسط SimpleXMLElement را گرفته آن را تبدیل به آرایه کردهشرت کد مان را فراخوانی کرده و این آرایه بدست امده را به متد render پاس داد و سپس محتوای رندر شده شرت کد را با کد شرتکد درون محتوای اصلی جایگذاری میکنیم.کلاس GoodImageفایل GoodImage.php2 متد که از کلاس Shortcode ایمپلمنت شده متد getCode که برای یافتن شرت کد در ShortcodeManager استفاده میشود و متد render که اتریبیوت های شرتکد را گرفته آن ها به دلخواه تغییر / پارز کرده و سپس رندر کرده و آن را برمیگرداند.کلاس GoodTextفایل GoodText.phpدر اینجا هم مشاهد میکنیم مانند کلاس GoodImage دو متد اصلی داریم با مکانیزم یکسان.راهندازی و ریجستر شرت کد هابرای راهندازی و ریجستر کردن شرت کد ها باید هنگام بوت / ریجیستر اپلیکیشن اونا رو ادد کنیم به شرت کات منیجر. برای این کار به این صورت عمل میکنیم:AppServiceProvider.phpفایل app\Providers\AppServiceProvider.php رو باز کرده و شرت کد هایی که میخوایم ریجستر بشن رو به این شکلی که در تصویر مشاهده میکنید ادد میکنیم.راهنمای استفادهفایل web.phpهمانطور که در فایل بالا مشاهده میکنید یک متن که حاوی کد شرت کدها هست رو به متد parse کلاس ShortcodeManager پاس داده و محتوای جایگذاری شده رو گرفته و به ویو اصلی خودمون تحویل دادیم.کد های پروژهجهت دسترسی به کد های مربوطه میتونید از این صفحه دسترسی داشته باشیدhttps://gitlab.com/sadeghisalar/wp-shortcode-for-laravelامیدوارم به کارتون بیاد و چیزای باحالی باهاش بسازید ? Salar Sadeghi Salar Sadeghi Tue, 09 Nov 2021 18:36:45 +0330