লারাভেল প্রজেক্ট শুরু করার জন্য Breeze (Tailwind CSS) এবং Laravel UI (Bootstrap) স্টার্টার কিটের তুলনামূলক বিশ্লেষণ করা হয়েছে। ( Laravel: Starter Kits: Breeze (Tailwind) or Laravel UI (Bootstrap) )
প্রিয় পাঠক, লারাভেলে দ্রুত অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য Breeze এবং Laravel UI স্টার্টার কিট সম্পর্কে আলোচনা করবো।
Laravel Breeze:
- Tailwind CSS দিয়ে তৈরি স্টার্টার কিট
- অথেনটিকেশন, রেজিস্ট্রেশন, পাসওয়ার্ড রিসেট ইত্যাদির জন্য scaffolding
Laravel UI:
- Bootstrap দিয়ে তৈরি স্টার্টার কিট
- অথেনটিকেশন এবং frontend scaffolding
উভয়েই দ্রুত কাজ শুরুর জন্য প্রয়োজনীয় রিসোর্স প্রদান করে। Breeze আধুনিক ডিজাইনের জন্য Tailwind ব্যবহার করে এবং Laravel UI প্রাচীনতর Bootstrap দিয়ে কাজ করে।
ভূমিকা
Laravel একটি শক্তিশালী PHP ওয়েব ফ্রেমওয়ার্ক যা দ্রুত এবং সুরক্ষিত ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। ল্যারাভেল 10 এর সাথে, দুটি নির্মিত-ইন স্টার্টার কিট আসে যা নতুন প্রজেক্ট শুরু করা সহজ করে দেয়: ব্রিজ এবং ল্যারাভেল UI। এই ব্লগে, আমরা এই দুটি স্টার্টার কিটের তুলনা করব, তাদের বৈশিষ্ট্য, প্রয়োজন এবং ব্যবহার ক্ষেত্রে আলোচনা করব।
ব্রিজ (টেলউইন্ড)
ব্রিজ একটি নির্মিত-ইন স্টার্টার কিট যা টেলউইন্ড CSS ফ্রেমওয়ার্ক ব্যবহার করে। টেলউইন্ড একটি ইউটিলিটি-ফার্স্ট CSS ফ্রেমওয়ার্ক যা দ্রুত এবং সহজে প্রতিক্রিয়াশীল ওয়েব ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়।
বৈশিষ্ট্য:
- টেলউইন্ড ইউটিলিটি ক্লাসের সম্পূর্ণ সুইট
- প্রাক-নির্মিত কম্পোনেন্টগুলির একটি সেট যেমন বোতাম, ফর্ম এবং নেভিগেশন বার
- এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের জন্য বিল্ট-ইন ট্যালিউইন্ড সাপোর্ট
প্রয়োজন:
ব্রিজ স্টার্টার কিটটি ব্যবহার করতে, আপনার টেলউইন্ড নির্ভরতা ইনস্টল করা থাকতে হবে। আপনি নিম্নলিখিত কমান্ডটি ব্যবহার করে এটি করতে পারেন:
<span class="markdown-code-block-delimiter">```</span>composer <span class="hljs-built_in">require</span> laravel/ui --dev<span class="markdown-code-block-delimiter">```</span>ব্যবহার ক্ষেত্র:
ব্রিজ স্টার্টার কিটটি এমন প্রজেক্টের জন্য উপযুক্ত যেখানে আপনি দ্রুত এবং সহজে প্রতিক্রিয়াশীল ওয়েব ইন্টারফেস তৈরি করতে চান। টেলউইন্ডের ইউটিলিটি-ফার্স্ট পদ্ধতিটি কাস্টম কম্পোনেন্ট তৈরি করতে এবং দ্রুত প্রোটোটাইপ তৈরি করতে সহজ করে তোলে।
ল্যারাভেল UI (বুটস্ট্র্যাপ)
ল্যারাভেল UI একটি নির্মিত-ইন স্টার্টার কিট যা বুটস্ট্রপ CSS ফ্রেমওয়ার্ক ব্যবহার করে। বুটস্ট্র্যাপ একটি ব্যাপকভাবে ব্যবহৃত এবং শক্তিশালী CSS ফ্রেমওয়ার্ক যা দ্রুত এবং সহজে প্রতিক্রিয়াশীল ওয়েব ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়।
বৈশিষ্ট্য:
- বুটস্ট্র্যাপ কম্পোনেন্টগুলির একটি সম্পূর্ণ সুইট যেমন বোতাম, ফর্ম, নেভিগেশন বার এবং মডাল
- এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের জন্য বিল্ট-ইন বুটস্ট্র্যাপ সাপোর্ট
- প্রমানীকরণ, অনুমতি এবং অন্যান্য সাধারণ ওয়েব অ্যাপ্লিকেশন বৈশিষ্ট্যগুলির জন্য স্ক্যাফোল্ডিং
প্রয়োজন:
ল্যারাভেল UI স্টার্টার কিটটি ব্যবহার করতে, আপনার বুটস্ট্র্যাপ নির্ভরতা ইনস্টল করা থাকতে হবে। আপনি নিম্নলিখিত কমান্ডটি ব্যবহার করে এটি করতে পারেন:
<span class="markdown-code-block-delimiter">```</span>composer <span class="hljs-built_in">require</span> laravel/ui --dev<span class="markdown-code-block-delimiter">```</span>ব্যবহার ক্ষেত্র:
ল্যারাভেল UI স্টার্টার কিটটি এমন প্রজেক্টের জন্য উপযুক্ত যেখানে আপনি দ্রুত এবং সহজে প্রতিক্রিয়াশীল ওয়েব ইন্টারফেস তৈরি করতে চান। বুটস্ট্র্যাপের ব্যাপক কম্পোনেন্ট লাইব্রেরি বিভিন্ন ধরণের ওয়েব অ্যাপ্লিকেশন তৈরি করা সহজ করে তোলে।
উদাহরণ প্রোগ্রাম
চলুন একটি ছোট প্রোগ্রাম দিয়ে ব্রিজ এবং ল্যারাভেল UI এর মধ্যে পার্থক্যটি ব্যাখ্যা করা যাক। নিম্নলিখিত কমান্ডটি ব্যবহার করে একটি নতুন ল্যারাভেল প্রोजেক্ট তৈরি করি:
<span class="markdown-code-block-delimiter">```</span>laravel <span class="hljs-keyword">new</span> blog<span class="markdown-code-block-delimiter">```</span>এরপর, আমরা ব্রিজ স্টার্টার কিটটি ইনস্টল করতে পারি:
<span class="markdown-code-block-delimiter">```</span>composer <span class="hljs-built_in">require</span> laravel/ui --dev<span class="markdown-code-block-delimiter">```</span>এরপর, আমরা resources/js/app.js ফাইলটি খুঁজে পাব এবং নিচের কোডটি যুক্ত করব:
import { InertiaApp } from '@inertiajs/inertia-vue'
import { InertiaProgress } from '@inertiajs/progress'
import Vue from 'vue'Vue.use(InertiaApp)
Vue.use(InertiaProgress)const app = new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(document.getElementById('app').dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
})app.$mount('#app')
এরপর, আমরা resources/js/Pages/Welcome.vue ফাইলটি তৈরি করব এবং নিচের কোডটি যুক্ত করব:
<template>
<div>
<h1>Welcome to Laravel!</h1>
<p>This is the welcome page for the Laravel application.</p>
</div>
</template><script>
export default {
name: 'Welcome',
}
</script>এরপর, আমরা ব্রিজ স্টার্টার কিটটির সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্যটি ব্যবহার করব, যা টেলউইন্ড ইউটিলিটি ক্লাস। আমরা resources/css/app.css ফাইলটি খুঁজে পাব এবং নিচের কোডটি যুক্ত করব:
<span class="markdown-code-block-delimiter">```</span><span class="hljs-meta">@tailwind base;</span><span class="markdown-code-block-delimiter">```</span>এই বিষয়ে আরো জানতে,
Official Docs Laravel Breeze Official Documentation
Official Docs Laravel UI: Official Github Page পড়ুন৷
