Skip to main content

Command Palette

Search for a command to run...

লারাভেলে লেআউট বিল্ডিং বা টেমপ্লেটিং

Updated
2 min read
লারাভেলে লেআউট বিল্ডিং বা টেমপ্লেটিং
A

Love to Explore PHP, Vue, Laravel and WordPress 💻

হ্যালো সবাইকে। আজকে আমরা আলোচনা করবো "কিভাবে লারাভেলে টেমপ্লেটিং বা লেআউট বিল্ডিং করা যায়"।

প্রথমে বুঝতে হবে টেমপ্লেটিং টা আসলে কী?

টেমপ্লেটিং হলো - একটি ওয়েব এপ্লিকেশন তৈরী করতে গেলে যেই কমন জিনিসগুলো (Header, Footer, Menu) বার বার ব্যবহার করতে হয়, সেগুলোকে মাত্র ১ বার কোড করে Dynamically একাধিকবার ব্যবহার করা।

সাধারণ PHP দিয়ে রাসেল ভাইয়া টেমপ্লেটিং করাটা দেখিয়েছেন। ক্লাসটা করে না থাকলে দেখে আসুন। Laravel এ এসে এই টেমপ্লেটিং-কে ডাকা হবে Layout Building নামে।


Layout Building এর প্রকারভেদঃ

লারাভেলে Layout Building দুই ভাবে করা যায়।

1. Layouts Using Components, 2. Layouts Using Template Inheritance

আমরা আজকে প্রথমটা নিয়ে আলোচনা করার চেষ্টা করবো।

#Layouts Using Components

ধরুন আপনার ডিজাইন করা একটি হোমপেইজ আছে। যেটাতে Header ও Footer আছে। আপনি চাইছেন Header ও Footer কে সব পেইজে দেখাতে। এজন্য আপনাকে লারাভেলের ফাইলগুলোর মধ্যে সর্বপ্রথম resources/views ফোল্ডারের ভিতরে components নামে একটি ফোল্ডার তৈরী করে সেখানে layout.blade.php নামে একটি নতুন ফাইল তৈরী করতে হবে।

এরপর এই layout.blade.php ফাইলে একদম <!DOCTYPE html> থেকে শুরু করে Header পর্যন্ত এবং Footer থেকে শুরু করে শেষ পর্যন্ত রেখে দিন। এই দুইয়ের মধ্যে থাকে পেইজের কন্টেন্ট গুলো। তাই পেইজের কন্টেন্ট গুলো Dynamically দেখানোর জন্য এখানে {{ $slot }} এট্রিবিউট লিখতে হবে। নিচের উদাহরণে লক্ষ্য করুনঃ-

{{ $slot }} এট্রিবিউটের কাজ হলো প্রতিটা আলাদা আলাদা পেইজের কন্টেন্টের Data Collect করে তা Header ও Footer সহ সেই পেইজে দেখানো। তাহলে এবার কিভাবে আমরা হোমপেইজের কন্টেন্ট গুলো দেখাতে পারবো?

এজন্য আমাদের যেতে হবে resources/views/welcome.blade.php ফাইলে। মনে রাখতে হবে {{ $slot }} এট্রিবিউকে কাজে লাগাতে হলে পেইজের ফাইলে <x-layout></x-layout> নামের ট্যাগ লিখতে হবে। <x-layout> ট্যাগ ছাড়া {{ $slot }} এট্রিবিউট কোনোভাবেই কাজ করবে না।

শুরুতে এই ট্যাগ হোমপেইজের ফাইলে লিখে তারপর এর ভিতরে হোমপেইজের সব কন্টেন্ট দিয়ে দিবো। ব্যাস, এবার Save করে ম্যাজিক দেখুন। দেখবেন আপনার হোমপেইজ একদম সুন্দর মত Header ও Footer সহ সব কন্টেন্ট দেখাচ্ছে।

একইভাবে অন্যান্য পেইজগুলোতে যদি এভাবে দেখাতে চান তাহলে সবার আগে সেই পেইজগুলোর View তৈরী করে নিন এবং তা web.php ফাইল থেকে Route করে নিন। কিভাবে পেইজের View এবং Route তৈরী করতে হয় তা নিয়ে অন্য একদিন আলোচনা করবো। আজ এ পর্যন্তই। সবাই ভালো থাকুন।

L

বিগিনার হিসেবে অনেক কিছু জানতে পারলাম। আরও তথ্য বহুল আর্টিকেল পড়তে অপেক্ষায় রইলাম। ধন্যবাদ

1

More from this blog

We discuss basic routing

বেসিক রাউটিং সফটওয়্যার আর্কিটেকচারে রাউট হচ্ছে মৌলিক উপাদান(Basic Component). রাউট URL(URL = Uniform Resource Locator) থেকে অনুরোধ গ্রহণ করে এবং এপ্লিকেশনকে রিসোর্সের জন্য নির্দেশনা প্রদান করে। লারাভেলের রাউট সমূহ একই সাথে সুবিন্যস্ত করে রাখার জন্য r...

Jun 1, 20233 min read

Visual Studio Code এডিটর কি-বোর্ড শর্টকার্ট

এখন কোডিংয়ের স্পীড হবে রকেটের গতি যদি আপনি ব্লগটি পড়েন এবং শর্টকাট ব্যবহার করেন তাহলে চলুন শুরু করি। Visual Studio Code এডিটর কি-বোর্ড শর্টকার্টঃ MAC ও WINDOWS এর জন্য আলাদা কি-বোর্ড শর্টকাট নিচে দেওয়া হল- Visual Studio Code এর কমান্ড পেলেট কিভাবে ওপ...

Jun 1, 20233 min read
Visual Studio Code এডিটর কি-বোর্ড শর্টকার্ট

WordPress Support Engineer Input Field And Form

আজকে আমরা আলোচনা করব আমাদের WordPress Support Engineer Course এর ক্লাস ২ নিয়ে এবং আমাদের টপিক হলো html input fields. ইনপুট ফিল্ডে বিভিন্ন রকম টাইপ রয়েছে এর মধ্যে default html,html-5,iput type="text" ইত্যাদি। তো চলুন শুরু করি ।প্রথমেই আমরা আলোচনা করব ...

May 7, 20233 min read

Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস

সবার প্রথমে আমাদের একটা Directory বানাতে হবে। আপনার Project এর নাম দিয়ে একটি Directory বানিয়ে ফেলুন। এরপর যেকোনো একটা Terminal ব্যবহার করে এই Directory তে ঢুকুন। npm install -D tailwindcss autoprefixer vite এই কমান্ড Terminal-এ দিবো। এক্সট্রা হিসেবে...

Apr 3, 20232 min read
Tailwind Css CLI ব্যাক্ষ্যা সহ Install প্রসেস
S

Shikhun Blog

96 posts