জাভাস্ক্রিপ্ট এবং ব্লেড দিয়ে পুরানো মান পরিচালনা করা: লারাভেল 10 ডায়নামিক ইনপুট ফর্ম

Laravel 10 এ জাভাস্ক্রিপ্টের সাথে পুরানো ফর্ম ডেটা পরিচালনা করা

Laravel 10-এ গতিশীল ফর্মগুলি বিকাশ করার সময়, একটি সাধারণ চ্যালেঞ্জ হল বৈধতা ব্যর্থতার পরে ব্যবহারকারীর ইনপুট ধরে রাখা। ব্লেড টেমপ্লেটগুলিতে, এটি সাধারণত এর সাথে পরিচালনা করা যেতে পারে পুরানো() সহায়ক ফাংশন, যা পূর্বে প্রবেশ করা মান পুনরুদ্ধার করে। যাইহোক, জাভাস্ক্রিপ্টের সাথে ফর্ম ক্ষেত্রগুলি যুক্ত করার সময় গতিশীলভাবে এই ফাংশনটি ব্যবহার করার জন্য বিশেষ হ্যান্ডলিং প্রয়োজন।

আমার প্রকল্পে, আমি এমন একটি সিস্টেম তৈরি করার সময় এই সমস্যার সম্মুখীন হয়েছি যা ব্যবহারকারীদের গতিশীলভাবে পুরষ্কার যোগ করতে এবং সরাতে দেয়। যাচাইকরণ ব্যর্থ হওয়ার পরে, ফর্মটি পুরানো পুরষ্কারের ডেটা সংরক্ষণ করা উচিত এবং সেই অনুযায়ী এটি প্রদর্শন করা উচিত। লারাভেলের পুরানো() ফাংশনটি ব্লেডের মধ্যে ভাল কাজ করে, তবে জাভাস্ক্রিপ্ট যুক্ত যুক্তির সাথে এটি একত্রিত করা কঠিন হতে পারে।

ব্লেড টেমপ্লেট এবং জাভাস্ক্রিপ্ট কীভাবে ডেটাকে ভিন্নভাবে ব্যাখ্যা করে তার মধ্যেই সমস্যার মূল বিষয়। জাভাস্ক্রিপ্টের সাথে নতুন উপাদান যুক্ত করার সময়, আমাকে গতিশীলভাবে পুরানো মান সন্নিবেশ করতে হবে, কিন্তু এটি করার জন্য সিনট্যাক্স সবসময় সোজা হয় না। এটি সঠিকভাবে বাস্তবায়ন করতে ব্যর্থ হলে পৃষ্ঠা পুনরায় লোড করার পরে গুরুত্বপূর্ণ ডেটা হারিয়ে যায়।

এই নির্দেশিকাটি আপনাকে ব্যবহার করার জন্য একটি ব্যবহারিক পদ্ধতির মাধ্যমে নিয়ে যাবে পুরানো() JavaScript-উত্পন্ন ক্ষেত্রগুলির মধ্যে ফাংশন। আমরা অন্বেষণ করব কিভাবে গতিশীলভাবে নতুন ইনপুট যুক্ত করা যায় এবং একটি Laravel 10 প্রকল্পে পুরানো মানগুলির সঠিক ধারণ নিশ্চিত করা যায়। এর মধ্যে ডুব দেওয়া যাক!

Laravel 10-এ পুরানো মানগুলির সাথে গতিশীল ফর্ম পরিচালনা

প্রদত্ত স্ক্রিপ্টগুলিতে, মূল চ্যালেঞ্জ হল গতিশীলভাবে নতুন পুরষ্কার ফর্ম ক্ষেত্রগুলিকে ধরে রাখার ক্ষমতা যুক্ত করা পুরানো মান লারাভেলে একটি বৈধতা ব্যর্থতার পরে। সাধারণত, লারাভেলের পুরানো() সাহায্যকারী ফর্ম জমা ব্যর্থ হওয়ার পরে পূর্বে প্রবেশ করা মানগুলি পুনরুদ্ধার করে, কিন্তু জাভাস্ক্রিপ্ট ব্যবহার করে উপাদান যুক্ত করার সময় এটি প্রায়শই কঠিন হয়। সমাধানটি ব্লেডের সংমিশ্রণে রয়েছে @json() জাভাস্ক্রিপ্টের সাথে নির্দেশিকা, যা পুরানো ইনপুট ডেটাকে গতিশীলভাবে জেনারেট করা ক্ষেত্রগুলিতে সরাসরি পাস করার অনুমতি দেয়।

ফাংশন আরো আইটেম যোগ করুন() এই পদ্ধতির চাবিকাঠি। এটি প্রতিটি পুরস্কারের জন্য নতুন ইনপুট ক্ষেত্র যুক্ত করতে জাভাস্ক্রিপ্ট ব্যবহার করে। ক্ষেত্রগুলি যুক্ত করার আগে, আমরা ব্যবহার করে কোন পুরানো মান আছে কিনা তা পরীক্ষা করি @json(পুরানো('পুরস্কার')). এটি পিএইচপি দিক থেকে পুরানো ইনপুট মানগুলিকে একটি জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তরিত করে, যা ব্যবহার করে পুনরাবৃত্তি করা যেতে পারে Object.entries(). এই পদ্ধতিটি প্রতিটি পুরষ্কার এন্ট্রির মাধ্যমে লুপ করার এবং গতিশীলভাবে তৈরি ফর্ম উপাদানগুলিতে এর সম্পর্কিত মান সন্নিবেশ করার অনুমতি দেয়।

স্ক্রিপ্ট এছাড়াও ব্যবহার করে সন্নিবেশসংলগ্ন HTML() পদ্ধতি, যা বিদ্যমান ফর্মের সাথে সম্পর্কিত একটি নির্দিষ্ট অবস্থানে HTML সামগ্রী সন্নিবেশ করায়। পৃষ্ঠাটি রিফ্রেশ না করেই নতুন পুরস্কার আইটেম যুক্ত করার জন্য এটি অত্যন্ত গুরুত্বপূর্ণ। উদাহরণস্বরূপ, একটি নতুন পুরস্কার যোগ করার সময়, স্ক্রিপ্ট উপযুক্ত ইনপুট মান সহ একটি নতুন ফর্ম ক্ষেত্র তৈরি করে এবং এটি ফর্ম কন্টেইনারে যুক্ত করে। দ পুরানো() ফাংশন নিশ্চিত করে যে ফর্মের বৈধতা ব্যর্থ হলে, পূর্বে প্রবেশ করা ডেটা ব্যবহারকারীর কাছে ফিরে আসবে।

সবশেষে, এই স্ক্রিপ্টগুলির আচরণ যাচাই করার জন্য ইউনিট পরীক্ষা করা গুরুত্বপূর্ণ। এই ক্ষেত্রে, assertSessionHasOldInput() এবং assertSessionHasErrors() Laravel সঠিকভাবে পুরানো ইনপুট ডেটা সংরক্ষণ এবং পুনরুদ্ধার করে তা নিশ্চিত করতে PHPUnit পরীক্ষায় ব্যবহার করা হয়। এই পরীক্ষাগুলি যাচাই করে যে পুরস্কার ডায়নামিক ফর্ম ক্ষেত্রগুলি পরবর্তী ফর্ম পুনরায় লোড করার সময় তাদের পূর্ববর্তী ইনপুট মানগুলি বজায় রাখার জন্য একটি ব্যর্থ বৈধতার পরে সেশনে ডেটা সংরক্ষণ করা হয়। জাভাস্ক্রিপ্ট এবং ব্লেডের এই সংমিশ্রণটি লারাভেলে জটিল, গতিশীল ফর্মগুলির সাথে কাজ করার সময় একটি বিরামহীন ব্যবহারকারীর অভিজ্ঞতা নিশ্চিত করে৷

// JavaScript function to dynamically append form fields
function addMoreItem() {
    let rewardCount = document.querySelectorAll('.reward-item').length + 1;
    let rewardData = @json(old('reward'));  // Get old values from Laravel
    let rewardItem = rewardData ? rewardData[rewardCount] : {};  // Default to empty object
    let rewardHtml = `
        <div id="reward-${rewardCount}" class="reward-item">`
            <input type="text" name="reward[${rewardCount}][reward_name]"
                value="{{ old('reward.${rewardCount}.reward_name', rewardItem.reward_name || '') }}" />`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// JavaScript function that handles form generation and appends old values if available
function appendRewardItem(key, value) {
    let rewardHtml = `
        <div id="reward-${key}" class="card">`
            <input type="text" name="reward[${key}][reward_name]" class="form-control"
                value="{{ old('reward.' + key + '.reward_name', value.reward_name || '') }}">`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// Loop through existing rewards and append them
let rewardDetails = @json(old('reward'));
if (rewardDetails) {
    Object.entries(rewardDetails).forEach(([key, value]) => {
        appendRewardItem(key, value);
    });
}

// PHPUnit test for validating old input values
public function testOldRewardValuesPersist() {
    // Simulate form validation failure
    $response = $this->post('/submit-form', [
        'reward' => [
            '1' => [
                'reward_name' => 'Test Reward 1'
            ]
        ]
    ]);
    $response->assertSessionHasErrors();
    $response->assertSessionHasOldInput('reward');  // Check old input
}

ব্লেড এবং জাভাস্ক্রিপ্ট সহ লারাভেলে ডায়নামিক ফর্ম হ্যান্ডলিং অপ্টিমাইজ করা

লারাভেলে, গতিশীলভাবে ফর্ম ইনপুটগুলি পরিচালনা করা, বিশেষত জাভাস্ক্রিপ্টের সাথে, ব্লেড এবং জাভাস্ক্রিপ্ট কীভাবে ইন্টারঅ্যাক্ট করে সেদিকে সতর্ক মনোযোগ প্রয়োজন। একটি মূল দিক যা প্রায়ই উপেক্ষা করা হয় তা হল বৈধতা ত্রুটি হওয়ার পরে ফর্ম ডেটা বজায় রাখা। ব্যবহার করে পুরানো() হেল্পার ফাংশন, লারাভেল ইনপুট ক্ষেত্রগুলিকে পুনরুদ্ধার করার একটি সহজ উপায় প্রদান করে, তবে এই কার্যকারিতাটি গতিশীলভাবে যুক্ত উপাদানগুলিতে অন্তর্ভুক্ত করার জন্য আরও চিন্তাশীল পদ্ধতির প্রয়োজন। অ্যারে বা সংগ্রহের সাথে ডিল করার সময় এটি বিশেষভাবে সত্য, যেমন পুরস্কার, যেখানে প্রতিটি আইটেমকে অবশ্যই তার ডেটা বজায় রাখতে হবে।

এই চ্যালেঞ্জের একটি শক্তিশালী সমাধান হচ্ছে লারাভেলের সমন্বয় @json() জাভাস্ক্রিপ্ট সহ নির্দেশিকা। দ @json() নির্দেশিকা সার্ভার-সাইড ডেটাকে এমন একটি বিন্যাসে রূপান্তরিত করার অনুমতি দেয় যা জাভাস্ক্রিপ্ট বুঝতে পারে, যা পুরানো মানগুলিকে ফ্রন্টএন্ডে ফেরত দেওয়ার জন্য অত্যন্ত গুরুত্বপূর্ণ। নতুন সংযোজিত ফর্ম ক্ষেত্রগুলিতে এই মানগুলি ম্যাপ করার মাধ্যমে, আপনি নিশ্চিত করতে পারেন যে ব্যবহারকারীরা তাদের অগ্রগতি হারাবেন না যদি একটি বৈধতা ব্যর্থ হয়। এই কৌশলটি ব্লেডের টেমপ্লেট রেন্ডারিং ক্ষমতাকে লাভ করে এবং জাভাস্ক্রিপ্ট-ভিত্তিক ফর্ম পরিচালনার নমনীয়তার অনুমতি দেয়।

শুধুমাত্র পুরানো মান পুনরুদ্ধার করার বাইরে, ত্রুটি পরিচালনা এবং ইনপুট বৈধতা বিবেচনা করা গুরুত্বপূর্ণ। এছাড়াও পুরানো(), লারাভেল প্রদান করে @ত্রুটি() নির্দিষ্ট ক্ষেত্রের পাশে বৈধতা বার্তা প্রদর্শন করতে, ব্যবহারকারীদের জন্য কী ভুল হয়েছে তা বোঝা সহজ করে তোলে। উভয় কমান্ড একত্রিত করা একটি বিরামবিহীন অভিজ্ঞতা নিশ্চিত করে যখন ফর্মগুলি যাচাইকরণ ব্যর্থ হয় এবং ব্যবহারকারীদের তাদের ইনপুটগুলি সংশোধন করতে হয়। জাভাস্ক্রিপ্টের নমনীয়তার সাথে ব্লেডের কার্যকারিতা একত্রিত করে, আপনি আপনার লারাভেল অ্যাপ্লিকেশনগুলিতে একটি গতিশীল কিন্তু স্থিতিশীল ব্যবহারকারীর অভিজ্ঞতা বজায় রাখতে পারেন।