نوشته های UNMD0

شخصی سازی کردن صفحه اول در لاراول توسط کاربر

UNMD0 — Wed, 24 Feb 2021 15:40:26 +0330

سلام.امروز میخوام از تجربه شخصی خودم برای پیاده سازی قابلیت "شخصی سازی کردن صفحه اول در لاراول توسط کاربر" بهتون بگمفکر کنید میخواید یه صفحه بسازید که کاربر ادمین بتونه صفحه اول (یا هر صفحه دیگه) رو شخصی سازی کنهنمونه ای که خودم ساختم (فروشگاه ساز 8190)خب حالا که تقریبا میدونید دارم از چی حرف میزنیم بریم که تجربه من رو در این مورد بشنویدفولدر بندی و فایلهااول از همه داخل public یه فولدر ساختم به اسم widgets بعد هر ویجتی که میخواستم اضافه کنم واسش یه فولدر میساختم و اسم ویجتم رو میزاشتم روش، برای مثال labelحالا داخل این فولدر 3 فایل ایجاد میکنیمindex.blade.phpindex.pngsettings.blade.phpدیتابیسبریم سروقت دیتابیس (بعد درمورد فایلها توضیح میدم)سه تا جدول ساختم به اسم هایw_propertiesw_settingsw_pagesw_propertiesمن هر ویجت جدید که میسازم میام و مشخصاتشو تو این جدول وارد میکنممشخصاتی نظیر اسم ویجت، آدرس فایل اصلی ویجت، آدرس عکس ویجت، آدرس فایل تنظیمات ویجت و....قطعا شما میتونید این کار رو به خاطر فولدر بندی صحیح هوشمند تر کنید و فقط برخی مشخصات رو ذخیره کنیدw_settingsاین جدول یک ردیف مهم داره به اسم settingاین ردیف، تنظیمات ویجت رو به صورت json داخل خودش ذخیره میکنه. برای واضح شدن مبحث یک مثال براتون میزنم.{ "text":"This is a label", "direction":"center", "font":"byekan", "font_size":"25", "weight":"100" }و حتما یادتون باشه برای هر ویجت ملزم به پر کردن این ردیف به عنوان تعیین پارامترهای پیشفرض هستین.دیگه خودتون باید در نظر بگیرین که ویجتتون نیاز به چه پارامترهایی داره.ردیف مهم بعدی تو این جدول gadget_id هست که به id در جدول w_properties وصله.این ردیف برای اینه که بدونیم کاربر از کدوم گجت یک نمونه جدید ساخته و میخواد تنظیمات رو انجام بده (یا حتی برای اینکه بدونیم کاربر میخواد تنظیمات کدوم گجت رو تغییر بده).w_pagesتنها ردیف قابل بحث این جدول content هست.به ترتیب id (از جدول w_settings) گجت هایی که باید توی صفحه مورد نظر لود بشن رو واراد میکنیم و با "،" از هم جداشون میکنیممثلا:1,2,4,6 اگر تا الان یکم گیج شدین مشکلی نداره، احتمالا در ادامه مفهوم رو میفهمینحالا بریم سراغ کدهایی که نوشتم.هرجا که خواستم به صفحه اصلی Route کنم اینکارو میکردم$pageinfo = pages::where("shopname","=",$site)->where("name","=","index")->first(); $gadgets = gadget_propertie::all(); if($gadgets != "" && $pageinfo != ""){ return view('your.main.view',["page"=>$pageinfo, "gadgets"=>$gadgets]); }کد صفحه اصلی (your.main.view) رو به این صورت نوشتم@foreach (explode(',', $page->content) as $pg) @if($pg <> "") @php $gadgetid=App\w_setting::where("id","=",$pg)->first()->gadget_id; $add = App\w_propertie::where("id","=",$gadgetid)->first()->main_file; $json = App\w_setting::where("id","=",$pg)->first()->setting; $parametr = json_decode($json); @endphp @include($add,["pmr" => $parametr]) //Call widget with parametrs @endif @endforeachتو اینجا میریم و همه ویجت هارو دونه دونه صدا میزنیم و تنظیماتش رو (که به json تبدیل کردیم) رو به عنوان پارامتر بهشون تحویل میدیمبعد تو فایل index.blade.php ویجت ها، براساس نیازم پارامتر هارو جای گذاری کردمبرای مثال ویجت لیبل رو به این صورت نوشتم

direction}}; font-family: {{$pmr->font}}; font-size: @if(isset($pmr->font_size)) {{$pmr->font_size."px"}} @else {{'45px'}} @endif; font-weight: @if(isset($pmr->weight)) {{$pmr->weight}} @else {{'bold'}} @endif; "> {{$pmr->text}}

در نظر بگیرید که اگر تو جدول w_settings ردیف setting رو با پارامتر های پیشفرض پر نکرده بودیم حالا باید هردفعه که پارامتری رو صدا میزدیم چک میکردیم آیا خالیه یا نه و اگر پارامتر خالی بود مقدار پیشفرضی رو در نظر بگیریم. مرحله بعد، فایل settings.blade.phpتو این فایل به کاربر اجازه میدیم پارامترها و تنظیمات ویجت رو انجام بده و اونو ذخیره کنه.شرح دادن فایل setting.blade.php نه تنها نکته حائز اهمیتی نداره بلکه به خاطر طولانی بودن کد این قسمت (که 99% هم html هست) باعث گیج شدن شما میشه.من تا اینجا نام جداول ، ردیف ها و کدها رو نسبت به پروژه خودم متفاوت بهتون گفتم.سایت ساز 8190، یک وبسایتی هست که برای تمرین خودم و زدن اولین پروژم با لاراول آوردمش بالا و بی شک کدهایی که دیدین و منطقی که فهمیدین بیشتر جای کار داره و بزارین به حساب تازه کار بودنم.امیدوارم بتونم به کسایی که میخواستن چنین قابلیتی رو برای سایتشون فعال کنن کمک کوچکی کرده باشم.حتما منتظر نظرات و نقد هاتون نسبت به کد و منطق این نوشته هستم.

نشان دادن تمام منوها و زیر منوها از دیتابیس در لاراول

UNMD0 — Tue, 12 May 2020 22:45:29 +0430

در نظر بگیرین یه CMS نوشتین یا به هر دلیل منو و زیر منوهاتونو در دیتابیس ذخیره میکنین تا بهتر مدیریت کنین.حالا وقتی بخواین اونارو لیست کنین با مشکلاتی مواجه میشین از جمله:استفاده از قطعه کدی که چندین بار Query Builder رو صدا کنهیه Foreach که نمیتونه عمق منو رو تشخیص بدهکلی حلقه و شرط اضافیو...من برای حل این مسئله میخوام یه راه حل بدمX Menuhttps://github.com/Unmd0/X_menuاول برین اینجا و پروژه رو Clone یا Download کنینبرین تو دایرکتوری لاراولتون و فایل xmenu.blade.php رو در « میخواد/دلتون/هرجا/views » قرار بدینحالا برین هرجا که میخواین منوهاتون رو لیست کنین (حتما باید در یک فایل blade.php. باشین) و فایل xmenu.blade.php رو include کنین@include('Address.to.xmenu')حالا که فایل xmenu.blade.php رو در دل قطعه کدهاتون قرار دادین در خط بعدش باید یه function رو صدا کنین@php xmenu ( 0 , 'Category Table' , 'Column of Category name' , 'Column of Category id' ); @endphpمقادیری که به این فانکشن باید بفرستین رو به ترتیب توضیح میدم:شماره ی اولین پدر (هر منو یه شماره پدر داره که در واقع نشون دهنده ی این است که هر منو زیر منو کدام آیتم هستش)نام جدول (جدولی که منوهای شما داخلش هستن)نام ردیفی که نام منوهاتون در اون جادارهنام ردیفی که نشان دهنده ی شماره منو پدر هستش (اگر هنوز "شماره پدر" شمارو گُنگ کرده پایین تر یه نمونه دیتابیس نشون میدم که از این حال در بیاین )7- محصولات | -------------------------------------------------------------- || 10- محصول (8) | 8- درج (7) ||---------------------------------- || 11-تنوع (8) | ______________________________________ || 12-محصول (9) | 9- ویرایش (7) ||----------------------------------- || 13-تنوع (9) | ______________________________________عددهایی که در پرانتز ها میبینید شماره پدر هستند و نشون میده هر منو باید زیر کدوم منو باشه (توجه کنید که پدر اصلی و اولین پدر برابر با صفر میباشد) الان با توجه به این نمونه دیتابیس (نام جدول category میباشد) باید فانکشن رو مثل کد زیر صدا کنیم@php xmenu(0,'category','cname','pid'); @endphpیه مسئله دیگه میمونهاحتمالا شما میخواین زیر منو ها معلوم نباشن و فقط اگر کاربر روی منویی ماوس رو برد زیر منوهاش معلوم بشن و واسه این کار یک استایل css نوشتینخب میتونین برین تو فایل xmenu.blade.php و قطعه کد زیر رو پیدا کنید و اسم class خودتون رو بزارین$class="header__menu__dropdown"و تمام.تمام تلاشمو کردم ساده و کامل توضیح بدم.فایل xmenu.blade.php توسط بنده توسعه پیدا کرده و همچنان در حال توسعه و بهتر شدن میباشد.آیا شما روش بهتری برای معرفی میشناسید؟لطفا نظرات خودتون رو بهم بگین.

رقصنده هایی به اسم UI و UX

UNMD0 — Mon, 11 May 2020 13:05:26 +0430

در طراحی سایت و طراحی اپلیکیشن دو کلمه بسیار کاربردین UI/UX.اول از همه بیاین ببینیم اینا خلاصه چه کلماتین و چه معنی میدن.UI : User Interface (رابط کاربری)UX : User Experience(تجربه کاربری)حالا این دو تخصص رو خیلی خلاصه معرفی میکنمUI(رابط کاربری) یعنی ظاهر، اینکه یک دکمه در سایتتون چه رنگی داشته باشه و چقدر سایه داشته باشه و.‌.. همش به منظور طراحی رابط کاربریتون هستششاید فکر کنید پس UI در این خلاصه میشه که ما هرجوری دلمون خواست رنگبندی انجام بدیم و بریم جلو.باید بگم خیررابط کاربری دارای یکسری قوانین از پیش تعیین شده و ابزار هستشنمونه ها رو تماشا کنید:Material Designاین نوع طراحی رو احتمالا تو برنامه های اندرویدی دیدینNeumorphismاگر با Neumorphism کار کردین یا میخواین کار کنین این منبع توصیه میشهUXبیاین انقدر ظاهربین نباشین، کاربرتونو بشناسین، بدونین واسه کار کردن با اپلیکیشن شما چه چیزی راضی کننده کاربرتونه یا در واقع تجربه کاربر از اپلیکیشن خودتون رو قابل قبول کنید.در این زمینه ظاهر کم رنگتر میشه، دیگه بحث سر این نیست که دکمه چه رنگی باشه، باید بحث کنیم که آیا باید باشه یا نه.من یه اشاره میکنم به مطلب خانوم سعیدی و یک مثال از دل اون مطلب رو اینجا مطرح میکنماینکه کاربر بدونه چند مرحله تا پایان فرآیندی مونده مربوط به UX میشه.طراحی توسط selectoحالا که UI/UX رو مختصرا فهمیدیم یه سوال واسه کسایی که میخوان وارد این حوزه ها بشن مطرح میشهآیا باید جفتشون رو یاد بگیرم؟دو رقصنده حرفه ای رو در نظر بگیرین. هر رقصنده به تنهایی قابلیت های قابل قبول و حرفه ای داره ولی وقتی این دو رقصنده باهم اجرا میکنن شگفتی بهتری میسازن.این مثال درمورد UI/UX هم صدق میکنه. اگر هردو زمینه رو بلد باشین شگفتی میسازین و بهتر عمل میکنید.امیدوارم این مطلب رو دوست داشته باشین.لطفا نظرات خودتون رو بهم بگین.

منابع مهم برای طراحی UI/UX (شماره یک)

UNMD0 — Sun, 10 May 2020 15:47:25 +0430

امروزه UI/UX از مهمترین نیازهای راه اندازی هر برنامه ای در هر پلتفرمی شده است، شما باید بدونید که میخواهید چه تاثیری برروی کاربر خود بگذارید.امروز میخوام منابع مهم و خوبی رو در زمینه طراحی UI/UX معرفی کنم.این منابع به شما کمک میکنن تا اطمینان پیدا کنید تاثیراتی که میخواهید بر روی بازدید کننده بگذارید را پایه ریزی کنید.Canva Colorsمیدونیم که رنگ ها برای جذب و رسوندن پیام های مختلف به کاربر در چه حد مهم هستند.سایت CANVA از بهترین منابع برای راهنمایی انتخاب رنگ ها در طراحی میباشدبرخی از قابلیت های این سایت در پایین لیست شده است:معنی رنگ ها ساخت پالت رنگی تصادفی معرفی بهترین ست های رنگی نسبت به رنگ انتخابی شما معرفی محبوب ترین پالت های رنگیLAWS of UXhttps://lawsofux.com/fittss-lawاین سایت برای معرفی قوانین UX و آموزش آنها میباشد.توضیحات مختصر میخواهید یا تکمیلی؟این سایت دارای هردو نوع توضیحات میباشد و انتخاب با شماست.Human interface Guidelinesشاید در نگاه اول این سایت رو مخصوص UX/UI کارهای محصولات اپل بدونین، ولی با خوندن مطالب و آموزش ها متوجه میشین که اطلاعات کامل و حرفه ای فارغ از نوع سیستم عامل برای طراحی رابط کاربری یاد خواهید گرفت.Materialاگر با متریال دیزاین آشنا هستین،اگر متریال دیزاین رو دقیق نمیشناسین،اگر نمیدونین متریال دیزاین رو از کجا شروع کنید،اگر دنبال نمونه های طراحی متریال دیزاین هستینبه این سایت مراجعه کنید.منبعی کامل و تخصصی برای طراحی متریالدر بالا چند منبع شناخته شده و قوی در حیطه کاری UI/UX معرفی شد، امیدوارم از آنها لذت ببرین و موارد جدید یاد بگیرین.در مقالات بعدی چندین منبع دیگر نیز معرفی میشود.آیا شما منبع خوبی برای معرفی میشناسید؟لطفا نظرات خودتون رو بهم بگین.