Html মডিউল এবং তার ব্যবহার

Elm এ Html মডিউল এবং তার ব্যবহার

Html মডিউলটি Elm ভাষায় ওয়েব পেজের ইউজার ইন্টারফেস (UI) তৈরি করার জন্য ব্যবহৃত হয়। এই মডিউলটি HTML উপাদানগুলো তৈরি করতে প্রয়োজনীয় ফাংশন সরবরাহ করে, যেমন div, span, button, input ইত্যাদি। Elm এর Html মডিউল একটি declarative স্টাইল ব্যবহার করে HTML উপাদান তৈরি করতে সহায়তা করে, যেখানে কোডে স্পষ্টভাবে নির্দিষ্ট করা হয় কিভাবে ইউজার ইন্টারফেস তৈরি হবে।

এখানে Html মডিউল এর ব্যবহার এবং কিছু উদাহরণ আলোচনা করা হলো।

১. Html মডিউল ইমপোর্ট করা

Elm এ Html মডিউল ব্যবহার করার জন্য প্রথমে এটি import করতে হয়। এছাড়াও, Html.Events মডিউলও ব্যবহার করা হয় যদি ইভেন্ট হ্যান্ডলিং করতে হয়।

import Html exposing (Html, div, button, text)
import Html.Events exposing (onClick)

এখানে, Html মডিউল থেকে div, button, এবং text ফাংশন ইমপোর্ট করা হয়েছে এবং Html.Events মডিউল থেকে onClick ইভেন্ট হ্যান্ডলিংয়ের জন্য ইমপোর্ট করা হয়েছে।

২. div এবং অন্যান্য HTML উপাদান তৈরি করা

Html মডিউল ব্যবহার করে বিভিন্ন HTML উপাদান তৈরি করা যায়, যেমন div, span, input, button ইত্যাদি। এই উপাদানগুলো তৈরি করার সময়, আপনি তাদের বৈশিষ্ট্য এবং ইনপুট হিসাবে প্যারামিটার দিতে পারেন।

উদাহরণ: div উপাদান

view : Html msg
view =
    div [] [ text "Hello, Elm!" ]

এখানে, একটি div এলিমেন্ট তৈরি করা হয়েছে, যার মধ্যে "Hello, Elm!" টেক্সট রয়েছে। div এর প্রথম আর্গুমেন্ট হিসাবে একটি লিস্ট দেওয়া হয়েছে, যা অতিরিক্ত অ্যাট্রিবিউট (যেমন ক্লাস, স্টাইল) ধারণ করতে পারে।

উদাহরণ: button উপাদান

view : Html msg
view =
    button [] [ text "Click Me" ]

এখানে, একটি বাটন তৈরি করা হয়েছে যার মধ্যে "Click Me" টেক্সট রয়েছে।

৩. ইভেন্ট হ্যান্ডলিং (Event Handling)

Html.Events মডিউল ব্যবহার করে আপনি বিভিন্ন ইউজার ইন্টারঅ্যাকশনের ইভেন্ট হ্যান্ডল করতে পারেন, যেমন onClick, onChange, onKeyDown ইত্যাদি। ইভেন্ট হ্যান্ডলিংয়ে আপনি একটি Msg টাইপের মেসেজ পাঠাতে পারেন যা অ্যাপ্লিকেশনের স্টেট পরিবর্তন করবে।

উদাহরণ: onClick ইভেন্ট

import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

type Msg = ButtonClicked

update : Msg -> Model -> Model
update msg model =
    case msg of
        ButtonClicked -> { model | count = model.count + 1 }

view : Model -> Html Msg
view model =
    div []
        [ button [ onClick ButtonClicked ] [ text ("Clicked: " ++ String.fromInt(model.count)) ]
        ]

এখানে, onClick ইভেন্ট ব্যবহার করে বাটনে ক্লিক করলে ButtonClicked মেসেজ পাঠানো হবে এবং অ্যাপ্লিকেশন স্টেট count এর মান বাড়ানো হবে।

৪. input উপাদান

input উপাদান ব্যবহার করে আপনি ইউজার ইনপুট গ্রহণ করতে পারেন। সাধারণত টেক্সট ইনপুট ফিল্ডে onChange ইভেন্ট ব্যবহার করে ইনপুটের মান পরিবর্তন ট্র্যাক করা হয়।

উদাহরণ: input এবং onChange

import Html exposing (Html, input, div, text)
import Html.Events exposing (onChange)

type Msg = TextChanged String

update : Msg -> Model -> Model
update msg model =
    case msg of
        TextChanged newText -> { model | text = newText }

view : Model -> Html Msg
view model =
    div []
        [ input [ onChange TextChanged ] []
        , div [] [ text ("You typed: " ++ model.text) ]
        ]

এখানে, input ফিল্ডে টাইপ করা হলে onChange ইভেন্ট ট্রিগার হবে এবং TextChanged মেসেজের মাধ্যমে model.text আপডেট হবে।

৫. input ফিল্ডের ভ্যালিডেশন

এছাড়াও, input ফিল্ডে ইউজারের ইনপুট ভ্যালিডেশন করার জন্য আপনি Elm এর ফাংশনাল কৌশল ব্যবহার করতে পারেন।

উদাহরণ: input ফিল্ডে ভ্যালিডেশন

import Html exposing (Html, input, div, text)
import Html.Events exposing (onChange)
import String exposing (contains)

type Msg = TextChanged String

update : Msg -> Model -> Model
update msg model =
    case msg of
        TextChanged newText ->
            if contains "@" newText then
                { model | text = newText, isValid = True }
            else
                { model | text = newText, isValid = False }

view : Model -> Html Msg
view model =
    div []
        [ input [ onChange TextChanged ] []
        , div [] [ text ("You typed: " ++ model.text) ]
        , if model.isValid then
            text "Valid email"
          else
            text "Invalid email"
        ]

এখানে, একটি সিম্পল email validation ফাংশন তৈরি করা হয়েছে যা ইনপুটে @ চিহ্নের উপস্থিতি পরীক্ষা করে। যদি ইনপুট সঠিক হয়, তবে "Valid email" প্রদর্শিত হবে, না হলে "Invalid email" বার্তা প্রদর্শিত হবে।

৬. Html মডিউলের অন্যান্য ফাংশন

এছাড়াও, Html মডিউলে আরও অনেক ফাংশন আছে যা আপনি বিভিন্ন HTML উপাদান তৈরি করতে ব্যবহার করতে পারেন:

• span: একটি inline ট্যাগ, যা ছোট টেক্সট বা উপাদান তৈরি করতে ব্যবহৃত হয়।
• ul, ol, li: অর্ডারড বা আনঅর্ডারড লিস্ট তৈরি করতে ব্যবহৃত হয়।
• img: ইমেজ উপাদান তৈরি করতে ব্যবহৃত হয়।
• form, label: ফর্ম তৈরি এবং ফর্মের সাথে সম্পর্কিত লেবেল তৈরি করতে ব্যবহৃত হয়।

উদাহরণ: লিস্ট তৈরি করা

view : Html Msg
view =
    div []
        [ ul []
            [ li [] [ text "Apple" ]
            , li [] [ text "Banana" ]
            , li [] [ text "Orange" ]
            ]
        ]

এখানে একটি unordered list তৈরি করা হয়েছে, যেখানে তিনটি লিস্ট আইটেম রয়েছে: "Apple", "Banana", এবং "Orange"।

উপসংহার

Html মডিউলটি Elm-এ ইউজার ইন্টারফেস তৈরি করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি বিভিন্ন HTML উপাদান তৈরি করার জন্য দরকারি ফাংশন সরবরাহ করে, যেমন div, button, input, text, এবং **ul**। Html.Events মডিউলটি ইভেন্ট হ্যান্ডলিংয়ের জন্য ব্যবহৃত হয়, যেখানে ইউজারের ইনপুট বা অন্যান্য ইভেন্টগুলো ট্র্যাক করা হয়। এর মাধ্যমে আপনি ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন যেখানে ইউজারের ইনপুট এবং অন্যান্য ইভেন্টের ভিত্তিতে স্টেট পরিবর্তন করা যায়।