Form Submission এবং ডেটা সংরক্ষণ করা

Riot.js-এ ফর্ম সাবমিশন এবং ডেটা সংরক্ষণ করা একটি সাধারণ প্রক্রিয়া। আপনি সহজেই ফর্মের ইনপুট ফিল্ডের মাধ্যমে ডেটা সংগ্রহ করতে পারেন এবং ফর্ম সাবমিশনের পরে সেটি প্রক্রিয়া বা সংরক্ষণ করতে পারেন। Riot.js এর ডাটা বাইন্ডিং এবং ইভেন্ট হ্যান্ডলিং ব্যবস্থার মাধ্যমে ফর্মের ডেটা সহজেই সংগ্রহ করা এবং প্রক্রিয়া করা সম্ভব।

১. ফর্ম সাবমিশন এবং ডেটা সংগ্রহ করা

ধরা যাক, আপনি একটি সিম্পল কন্টাক্ট ফর্ম তৈরি করতে চান যেখানে নাম, ইমেইল, এবং বার্তা নেওয়া হবে এবং ফর্ম সাবমিশনের পরে সেই ডেটা কনসোলে লোগ করা হবে।

Example: Simple Form Submission in Riot.js

ContactForm.riot:

<!-- ContactForm.riot -->
<contact-form>
  <h2>Contact Us</h2>
  
  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={nameInput} placeholder="Enter your name" required />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" ref={emailInput} placeholder="Enter your email" required />
    </div>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" ref={messageInput} placeholder="Enter your message" required></textarea>
    </div>

    <button type="submit">Submit</button>
  </form>

  <script>
    export default {
      handleSubmit(e) {
        e.preventDefault(); // Prevent form from reloading the page

        const name = this.refs.nameInput.value;
        const email = this.refs.emailInput.value;
        const message = this.refs.messageInput.value;

        // Log the data to the console or store it
        console.log({ name, email, message });

        // Optionally, clear the form after submission
        this.refs.nameInput.value = '';
        this.refs.emailInput.value = '';
        this.refs.messageInput.value = '';
      }
    }
  </script>
</contact-form>

এখানে:

• onsubmit={handleSubmit}: ফর্ম সাবমিট হলে handleSubmit ফাংশন কল হয়।
• this.refs.nameInput.value: ফর্ম ইনপুট ফিল্ডগুলোর ভ্যালু সংগ্রহ করা হচ্ছে।
• e.preventDefault(): ফর্ম সাবমিট হলে পেজ রিফ্রেশ হতে না দিয়ে, ফর্ম ডেটা প্রক্রিয়া করা হচ্ছে।

২. ফর্ম ডেটা সংরক্ষণ করা

ফর্ম ডেটা সাবমিট করার পরে, আপনি সেটি স্টেট বা লোকাল স্টোরেজ তে সংরক্ষণ করতে পারেন। Riot.js এর স্টেট (স্থানীয় ডাটা) ব্যবহার করে ডেটা অ্যাক্সেস এবং আপডেট করা সহজ।

Example: Save Form Data Locally (using State)

<!-- ContactForm.riot -->
<contact-form>
  <h2>Contact Us</h2>
  
  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={nameInput} placeholder="Enter your name" required />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" ref={emailInput} placeholder="Enter your email" required />
    </div>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" ref={messageInput} placeholder="Enter your message" required></textarea>
    </div>

    <button type="submit">Submit</button>
  </form>

  <h3>Form Data</h3>
  <ul>
    <li>Name: {state.name}</li>
    <li>Email: {state.email}</li>
    <li>Message: {state.message}</li>
  </ul>

  <script>
    export default {
      state: {
        name: '',
        email: '',
        message: ''
      },

      handleSubmit(e) {
        e.preventDefault(); // Prevent form from reloading the page

        const name = this.refs.nameInput.value;
        const email = this.refs.emailInput.value;
        const message = this.refs.messageInput.value;

        // Save the data to state
        this.state.name = name;
        this.state.email = email;
        this.state.message = message;

        // Optionally, you could also save it to localStorage or an API
        localStorage.setItem('formData', JSON.stringify({ name, email, message }));

        // Clear the form
        this.refs.nameInput.value = '';
        this.refs.emailInput.value = '';
        this.refs.messageInput.value = '';
      }
    }
  </script>
</contact-form>

এখানে:

• this.state: ফর্মের ডেটা স্টেট হিসেবে সংরক্ষণ করা হচ্ছে।
• localStorage.setItem: ফর্ম ডেটা localStorage তে সংরক্ষণ করা হচ্ছে, যাতে ডেটা ব্রাউজার স্টোরেজে রাখা যায়। এতে করে পেজ রিফ্রেশ হলেও ডেটা টিকে থাকে।
• UI: state এর মাধ্যমে ডেটা UI তে প্রদর্শিত হচ্ছে, যেমন নাম, ইমেইল, এবং বার্তা।

৩. ফর্ম ডেটা একটি API-তে সাবমিট করা

ফর্ম ডেটা API বা ব্যাকএন্ড সার্ভারে পাঠানোর জন্য আপনি fetch বা axios ব্যবহার করতে পারেন। নিচে fetch ব্যবহার করে ফর্ম ডেটা সাবমিট করার একটি উদাহরণ দেওয়া হল:

Example: Submit Form Data to an API

<!-- ContactForm.riot -->
<contact-form>
  <h2>Contact Us</h2>
  
  <form onsubmit={handleSubmit}>
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" ref={nameInput} placeholder="Enter your name" required />
    </div>

    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" ref={emailInput} placeholder="Enter your email" required />
    </div>

    <div>
      <label for="message">Message:</label>
      <textarea id="message" ref={messageInput} placeholder="Enter your message" required></textarea>
    </div>

    <button type="submit">Submit</button>
  </form>

  <script>
    export default {
      handleSubmit(e) {
        e.preventDefault(); // Prevent form from reloading the page

        const name = this.refs.nameInput.value;
        const email = this.refs.emailInput.value;
        const message = this.refs.messageInput.value;

        // Create the form data object
        const formData = {
          name: name,
          email: email,
          message: message
        };

        // Send the form data to an API
        fetch('https://example.com/api/submit-form', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(formData)
        })
        .then(response => response.json())
        .then(data => {
          console.log('Form submitted successfully:', data);
          // Optionally, show a success message to the user
        })
        .catch(error => {
          console.error('Error submitting form:', error);
          // Optionally, show an error message to the user
        });

        // Clear the form
        this.refs.nameInput.value = '';
        this.refs.emailInput.value = '';
        this.refs.messageInput.value = '';
      }
    }
  </script>
</contact-form>

এখানে:

• fetch ব্যবহার করে ফর্ম ডেটা একটি API তে POST করা হচ্ছে।
• JSON.stringify(formData): ফর্ম ডেটা JSON আকারে সার্ভারে পাঠানো হচ্ছে।
• response.json(): সার্ভার থেকে রেসপন্স JSON আকারে পাওয়া যাবে।

সারাংশ

Riot.js-এ ফর্ম সাবমিশন এবং ডেটা সংরক্ষণ খুব সহজ। আপনি onsubmit ইভেন্ট এবং refs ব্যবহার করে ফর্মের ইনপুট ডেটা সংগ্রহ করতে পারেন। সেই ডেটা আপনি স্টেট অথবা localStorage তে সংরক্ষণ করতে পারেন, অথবা API তে পাঠাতে পারেন। Riot.js এর ডাটা বাইন্ডিং সিস্টেম আপনাকে সহজে UI রিফ্রেশ করতে এবং ডেটা প্রক্রিয়া করতে সাহায্য করে।