Custom Widget তৈরি করা

উইজেটস এবং ইউআই কম্পোনেন্টস - জী ফ্রেমওয়ার্ক (Yii Framework) - Web Development

230

Yii ফ্রেমওয়ার্কে Widget হল এমন একটি উপাদান যা পুনরায় ব্যবহারযোগ্য UI কম্পোনেন্ট তৈরি করতে সহায়তা করে। Custom Widget তৈরি করা Yii-তে একটি অত্যন্ত কার্যকরী পদ্ধতি, যা আপনাকে একাধিক স্থানে ব্যবহার করার জন্য কাস্টম UI বা ফাংশনালিটি তৈরি করতে সাহায্য করে।

Widget সাধারণত HTML, CSS, এবং JavaScript এর সমন্বয়ে কাজ করে এবং এটি কন্ট্রোলার থেকে পাস করা ডেটা বা কনফিগারেশন সেটিংস নিয়ে ইউজার ইন্টারফেসে ডায়নামিক কন্টেন্ট প্রদর্শন করতে পারে।

এখানে Yii 2 এর মধ্যে Custom Widget তৈরি করার পুরো প্রক্রিয়া দেওয়া হলো।


১. Yii 2-তে Custom Widget তৈরি করার জন্য প্রাথমিক ধারণা

Yii 2-এ কাস্টম উইজেট তৈরি করতে হলে আপনাকে একটি কাস্টম ক্লাস তৈরি করতে হবে, যা yii\base\Widget থেকে ইনহেরিট করবে। এর মধ্যে আপনি আপনার HTML কন্টেন্ট তৈরি করবেন এবং যেকোনো ডায়নামিক ডেটা বা কনফিগ প্যারামিটার প্রক্রিয়া করবেন।

২. Custom Widget ক্লাস তৈরি করা

উদাহরণ: Simple Box Widget

এখানে একটি সিম্পল কাস্টম উইজেট তৈরি করা হচ্ছে, যা একটি div এলিমেন্ট প্রদর্শন করবে এবং তার মধ্যে কিছু কন্টেন্ট থাকবে।

  1. Widget ক্লাস তৈরি করুন:

    আপনার প্রজেক্টের components ফোল্ডারে একটি নতুন ক্লাস ফাইল তৈরি করুন। উদাহরণস্বরূপ, SimpleBoxWidget.php ফাইলটি components ফোল্ডারে রাখা যেতে পারে।

    components/SimpleBoxWidget.php

    <?php
    
    namespace app\components;
    
    use yii\base\Widget;
    
    class SimpleBoxWidget extends Widget
    {
        public $content;  // Widget-এর মধ্যে প্রদর্শনযোগ্য কন্টেন্ট
    
        public function init()
        {
            parent::init();
            if ($this->content === null) {
                $this->content = 'ডিফল্ট কন্টেন্ট'; // যদি কন্টেন্ট না দেওয়া হয় তবে ডিফল্ট কন্টেন্ট দেখাবে
            }
        }
    
        public function run()
        {
            return "<div class='simple-box'>{$this->content}</div>"; // HTML কন্টেন্ট রিটার্ন করা
        }
    }
    
    • এখানে SimpleBoxWidget ক্লাসটি yii\base\Widget থেকে ইনহেরিট করা হয়েছে।
    • content প্রপার্টি ব্যবহারকারী থেকে ডেটা গ্রহণ করতে সহায়তা করবে, যদি কিছু কন্টেন্ট না দেওয়া হয় তবে ডিফল্ট মান "ডিফল্ট কন্টেন্ট" প্রদর্শিত হবে।
    • run() মেথডের মধ্যে HTML কন্টেন্ট রিটার্ন করা হচ্ছে, যা ওয়েবপেজে প্রদর্শিত হবে।
  2. Widget স্টাইলিং (optional):

    আপনি চাইলে কাস্টম উইজেটের জন্য CSS স্টাইলও যোগ করতে পারেন। সাধারণত, এটি web/css/site.css ফাইলে যুক্ত করা হয়:

    web/css/site.css

    .simple-box {
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
    }
    

    এই CSS কোডটি SimpleBoxWidget কে একটি সুন্দর স্টাইল প্রদান করবে।


৩. Custom Widget ব্যবহার করা

একবার উইজেট তৈরি হয়ে গেলে, আপনি এটি যেকোনো কন্ট্রোলার বা ভিউ ফাইলে ব্যবহার করতে পারেন। Yii 2 তে কাস্টম উইজেট ব্যবহার করার জন্য আপনাকে Yii::$app->get('widgetClass') অথবা সরাসরি ক্লাসের নাম ব্যবহার করতে হবে।

উদাহরণ: Widget ব্যবহার করা

আপনি যদি এই কাস্টম উইজেটটি আপনার ভিউ ফাইলে ব্যবহার করতে চান, তবে তা খুবই সহজ। এটি একটি সাধারণ ভিউ ফাইলে অন্তর্ভুক্ত করা যেতে পারে, যেমন views/site/index.php

views/site/index.php

<?php
use app\components\SimpleBoxWidget;
?>

<h1>আমার প্রথম উইজেট</h1>

<?= SimpleBoxWidget::widget([
    'content' => 'এটি একটি কাস্টম উইজেটের কন্টেন্ট!',
]) ?>

<p>এই প্যারাগ্রাফটি সাধারণ HTML কন্টেন্ট।</p>
  • এখানে, SimpleBoxWidget::widget() কল করে উইজেটটি ব্যবহৃত হয়েছে এবং content প্যারামিটারটি পাঠানো হয়েছে।
  • এটি একটি div এলিমেন্ট হিসেবে রেন্ডার হবে, যার মধ্যে "এটি একটি কাস্টম উইজেটের কন্টেন্ট!" টেক্সট প্রদর্শিত হবে।

৪. Widget কনফিগারেশন

আপনার উইজেটের কনফিগারেশন আরও সাধারণ বা ডায়নামিক করতে আপনি উইজেটের বিভিন্ন প্রপার্টি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, উইজেটের জন্য CSS ক্লাস, বা বিভিন্ন ধরনের কন্টেন্ট পাস করা যেতে পারে।

কনফিগারেশন উদাহরণ:

<?= SimpleBoxWidget::widget([
    'content' => 'এই কাস্টম উইজেটটি স্টাইল এবং কনফিগারেশন সহ!',
    'options' => ['class' => 'my-custom-class']
]) ?>

এখানে options প্রপার্টি ব্যবহার করে আপনি কাস্টম HTML অ্যাট্রিবিউটও পাস করতে পারেন। উদাহরণস্বরূপ, আপনি class অ্যাট্রিবিউট পরিবর্তন করতে পারবেন।


৫. Widget-এ ডায়নামিক কন্টেন্ট

কাস্টম উইজেট ডায়নামিক ডেটা প্রদর্শন করতে সহায়তা করে, যা কন্ট্রোলার থেকে পাস করা যায়। যেমন:

Controller থেকে ডেটা পাস করা:

public function actionIndex()
{
    $data = 'ডায়নামিক কন্টেন্ট এখানে পাস করা হবে!';
    return $this->render('index', [
        'data' => $data,
    ]);
}

View তে Widget ব্যবহার করা:

<?= SimpleBoxWidget::widget([
    'content' => $data,
]) ?>

এখানে, কন্ট্রোলারের $data ভ্যারিয়েবলটি ভিউ ফাইলে পাস করা হচ্ছে, এবং SimpleBoxWidget এর মাধ্যমে তা প্রদর্শিত হচ্ছে।


৬. উইজেটের উন্নত কনফিগারেশন

Yii-তে আরও উন্নত কাস্টম উইজেট তৈরি করতে আপনি Yii::$app->params এবং Yii::$app->get() ফাংশন ব্যবহার করে কনফিগারেশন প্যারামিটার বা আরও ডায়নামিক ফাংশনালিটি যুক্ত করতে পারেন।


সারাংশ

Yii ফ্রেমওয়ার্কে Custom Widget তৈরি করা একটি শক্তিশালী উপায় যা UI কম্পোনেন্টগুলোর পুনঃব্যবহারযোগ্যতা এবং রিফ্যাক্টরিং সহজ করে। yii\base\Widget ক্লাস ব্যবহার করে আপনি আপনার কাস্টম উইজেট তৈরি করতে পারেন, যা HTML, CSS, এবং JavaScript কোডকে একত্রে কাজ করতে দেয়। এই উইজেটটি কন্ট্রোলার থেকে পাস করা ডেটা বা কনফিগ প্যারামিটার ব্যবহার করে ডায়নামিক কন্টেন্ট প্রদর্শন করতে পারে।

Content added By
Promotion

Are you sure to start over?

Loading...