Views এবং Templates

Web2Py-তে Views এবং Templates হলো অ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) অংশ, যেখানে ডেটা প্রদর্শিত হয়। Views এবং Templates Web2Py এর MVC (Model-View-Controller) আর্কিটেকচারে গুরুত্বপূর্ণ ভূমিকা পালন করে, যেখানে Views হল ইউজারের কাছে ডেটা উপস্থাপন করার জন্য ব্যবহৃত অংশ এবং Templates হল সেই ডেটা প্রদর্শন করার ফরম্যাট বা কাঠামো।

Web2Py Views

Web2Py তে Views হল ফাইল যা কন্ট্রোলার থেকে প্রাপ্ত ডেটা ইউজারের কাছে প্রদর্শন করে। যখন ইউজার কোনও URL রিকোয়েস্ট করে, কন্ট্রোলার ফাংশন সেই রিকোয়েস্ট প্রক্রিয়া করে এবং View ফাইলের মধ্যে ডেটা পাঠায়, যা HTML, JSON বা অন্য যেকোনো ফরম্যাটে প্রদর্শিত হতে পারে।

Views এর কাজ

• ডেটা প্রদর্শন: Views ডেটাকে প্রদর্শন করতে ব্যবহৃত হয়, যা কন্ট্রোলার থেকে প্রাপ্ত হয়।
• UI উপাদান তৈরি: Views ইউজার ইন্টারফেসের উপাদান (যেমন টেবিল, লিস্ট, বাটন, ফর্ম) তৈরি করতে ব্যবহৃত হয়।
• HTML টেমপ্লেটিং: Views সাধারণত HTML টেমপ্লেট হিসেবে থাকে, যেখানে Python কোডের মাধ্যমে ডেটা ঢোকানো হয়।

Views ফোল্ডার

Web2Py তে Views ফাইলগুলি /views ফোল্ডারে থাকে। প্রতিটি কন্ট্রোলারের জন্য একটি আলাদা ভিউ ফোল্ডার থাকে। উদাহরণস্বরূপ:

/your_app_name
  /views
    default/
      index.html
      about.html

এখানে index.html এবং about.html ভিউ ফাইল দুটি default কন্ট্রোলারের অংশ।

Web2Py Templates

Web2Py তে Templates হল Views এর একটি বিশেষ অংশ, যেখানে HTML কোড এবং Python কোডের মধ্যে একটি সেতু তৈরি করা হয়। Templates-এর মাধ্যমে আপনি ডায়নামিক কন্টেন্ট তৈরি করতে পারেন।

Templates এর কাজ

• ডাইনামিক কন্টেন্ট রেন্ডারিং: Template গুলি ডাইনামিক কন্টেন্ট (যেমন ডেটাবেস থেকে প্রাপ্ত ডেটা) রেন্ডার করতে ব্যবহৃত হয়।
• ভিউ ফাইলের মধ্যে কোড সংযোগ: Template ফাইলের মধ্যে HTML কোড এবং Python কোড (যেমন {{=variable}}) মিশিয়ে ডেটা প্রদর্শন করা হয়।

Template Syntax

Web2Py তে Templates-এর মধ্যে Python কোড মিশ্রিত করতে {{= }} স্যিনট্যাক্স ব্যবহার করা হয়। উদাহরণস্বরূপ:

<h2>{{=message}}</h2>

এখানে, message হল Python ভ্যারিয়েবল যা কন্ট্রোলার থেকে ভিউতে পাঠানো হয়েছে। Web2Py এই ভ্যারিয়েবলের মান HTML ফাইলের মধ্যে প্রতিস্থাপন করে।

Example:

1. Controllers (default.py):

   def index():
       message = "Welcome to Web2Py!"
       return dict(message=message)
   

2. Views (default/index.html):

   <h1>{{=message}}</h1>
   

এখানে index() কন্ট্রোলার থেকে পাঠানো message ভ্যারিয়েবলটি index.html ফাইলে রেন্ডার হবে এবং "Welcome to Web2Py!" দেখাবে।

Views এবং Templates এর বৈশিষ্ট্য

1. HTML এবং Python কোড একত্রিত করা: Web2Py তে Templates ব্যবহার করে HTML কোড এবং Python কোড একত্রিত করা যায়। উদাহরণস্বরূপ, ডেটাবেস থেকে পাওয়া ডেটা HTML টেবিলের মধ্যে প্রদর্শন করা:

   def show_books():
       books = db().select(db.book.ALL)  # ডেটাবেস থেকে বইয়ের তালিকা
       return dict(books=books)
   

   Views (show_books.html):

   <h1>Books List</h1>
   <table>
       <tr>
           <th>Title</th>
           <th>Author</th>
       </tr>
       {{for book in books:}}
       <tr>
           <td>{{=book.title}}</td>
           <td>{{=book.author}}</td>
       </tr>
       {{pass}}
   </table>
   

   এখানে, books ডেটাবেস থেকে নেওয়া ডেটা এবং এটি টেবিলের মধ্যে দেখানো হচ্ছে।

2. ব্লক এবং লুপ ব্যবহার: আপনি Python এর মতো লজিক্যাল কন্ট্রোল (যেমন লুপ, if-else) HTML টেমপ্লেটে ব্যবহার করতে পারেন:

   {{if message:}}
       <p>{{=message}}</p>
   {{else:}}
       <p>No message available</p>
   {{pass}}
   

3. Partial Views: আপনি Views এর মধ্যে ছোট ছোট অংশ (Partial Views) তৈরি করতে পারেন, যা একাধিক ভিউতে পুনঃব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, একটি কমন হেডার বা ফুটার টেমপ্লেট।

   header.html:

   <header>
       <h1>My Web2Py App</h1>
   </header>
   

   এবং অন্যান্য ভিউ ফাইলে এটি ইনক্লুড করতে পারেন:

   {{include 'header.html'}}
   

Web2Py তে HTML ফর্ম ব্যবহার

Web2Py তে SQLFORM ব্যবহার করে আপনি সহজেই HTML ফর্ম তৈরি করতে পারেন যা ডেটাবেসে ডেটা জমা করতে সাহায্য করে।

উদাহরণ:

1. Controller (default.py):

   def add_book():
       form = SQLFORM(db.book)
       if form.process().accepted:
           response.flash = 'Book added successfully!'
       return dict(form=form)
   

2. Views (add_book.html):

   <h1>Add a New Book</h1>
   {{=form}}
   

এখানে, SQLFORM দিয়ে একটি ফর্ম তৈরি হয়েছে যা ডাটাবেসে নতুন বই যোগ করার জন্য ব্যবহৃত হবে।

সারাংশ

Web2Py তে Views এবং Templates ইউজার ইন্টারফেস তৈরি এবং ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়। Views হল সেই ফাইল যেখানে ডেটা দেখানো হয় এবং Templates হল HTML ফাইল যেখানে Python কোড দিয়ে ডেটা রেন্ডার করা হয়। আপনি SQLFORM ব্যবহার করে ফর্ম তৈরি করতে পারেন এবং include ব্যবহার করে বিভিন্ন টেমপ্লেট পুনঃব্যবহার করতে পারেন। Web2Py এর টেমপ্লেটিং সিস্টেম ডেভেলপারদের সহজে ডায়নামিক ওয়েব পেজ তৈরি করতে সাহায্য করে।

Web2Py তে View ফাইলগুলি ইউজার ইন্টারফেস (UI) তৈরির জন্য ব্যবহৃত হয়। View ফাইলগুলি কন্ট্রোলার থেকে প্রাপ্ত ডেটা প্রদর্শন করে এবং ইউজারদের জন্য অ্যাপ্লিকেশনের ফ্রন্টএন্ড তৈরি করে। Web2Py তে ভিউ ফাইলগুলি সাধারণত HTML এবং Python কোডের সংমিশ্রণ হয়ে থাকে, যা টেমপ্লেট সিস্টেম ব্যবহার করে ডায়নামিক কনটেন্ট তৈরি করে।

এখানে Web2Py তে View ফাইল তৈরি এবং ব্যবহারের নিয়ম ব্যাখ্যা করা হলো।

Web2Py তে View ফাইল তৈরি এবং ব্যবহারের নিয়ম

১. View ফাইলের অবস্থান

Web2Py তে View ফাইলগুলি সাধারণত views ফোল্ডারে থাকে। প্রতিটি কন্ট্রোলারের জন্য আলাদা আলাদা ভিউ ফোল্ডার থাকে, এবং প্রতিটি অ্যাকশনের জন্য আলাদা আলাদা HTML ফাইল থাকে।

উদাহরণস্বরূপ:

/your_app_name
  /views
    /default
      index.html
      about.html

এখানে default হলো কন্ট্রোলারের নাম এবং index.html ও about.html হলো ভিউ ফাইল।

২. View ফাইল তৈরি করা

View ফাইল তৈরি করতে, আপনাকে HTML ফাইলের মধ্যে Python কোড ইনজেক্ট করতে হবে, যা কন্ট্রোলার থেকে পাঠানো ডেটা ভিউতে প্রদর্শন করবে।

ধরা যাক, একটি সিম্পল অ্যাপ্লিকেশন তৈরি করা হচ্ছে যেখানে ব্যবহারকারীদের একটি বার্তা এবং তালিকা দেখানো হবে।

1. Controllers (default.py):

   def index():
       message = "Welcome to Web2Py!"
       books = db().select(db.book.ALL)  # ডেটাবেস থেকে বইয়ের তালিকা আনা হচ্ছে
       return dict(message=message, books=books)
   

2. Views (default/index.html):

   <h1>{{=message}}</h1>
   <h2>Book List:</h2>
   <ul>
     {{for book in books:}}
       <li>{{=book.title}}</li>
     {{pass}}
   </ul>
   

   এখানে {{=message}} এবং {{for book in books:}} এর মাধ্যমে কন্ট্রোলার থেকে প্রাপ্ত ডেটা ভিউতে প্রদর্শিত হবে।

৩. View ফাইলের মাধ্যমে Python কোড ব্যবহার

Web2Py তে ভিউ ফাইলে Python কোড ব্যবহার করতে {{= }} সিনট্যাক্স ব্যবহার করা হয়। আপনি যেকোনো Python এক্সপ্রেশন বা ভেরিয়েবল ভিউতে প্রদর্শন করতে পারেন এই সিনট্যাক্সের মাধ্যমে।

• ভেরিয়েবল প্রদর্শন:

  <h1>{{=message}}</h1>
  

  এখানে message কন্ট্রোলার থেকে ভিউতে প্রেরিত একটি ভেরিয়েবল এবং তা HTML পেজে প্রদর্শিত হবে।

• লুপ ব্যবহার:

  <ul>
    {{for book in books:}}
      <li>{{=book.title}}</li>
    {{pass}}
  </ul>
  

  এখানে books হল একটি লিস্ট, এবং এর মধ্যে থাকা প্রতিটি বইয়ের নাম book.title দিয়ে প্রদর্শিত হবে।

• শর্ত (Condition) ব্যবহার:

  {{if message:}}
      <p>{{=message}}</p>
  {{else:}}
      <p>No message available.</p>
  {{pass}}
  

  এখানে message ভেরিয়েবলটি যদি থাকে, তাহলে তা প্রদর্শিত হবে, না হলে একটি ডিফল্ট বার্তা দেখানো হবে।

৪. ফর্ম তৈরি এবং প্রক্রিয়া করা

Web2Py তে ফর্ম তৈরি করতে SQLFORM ব্যবহার করা হয়, যা ডেটাবেস টেবিলের সাথে সম্পর্কিত ফর্ম তৈরি করে।

• ফর্ম তৈরি:

  def add_book():
      form = SQLFORM(db.book)  # db.book টেবিলের জন্য ফর্ম
      if form.process().accepted:
          response.flash = "Book added successfully!"
      return dict(form=form)
  

• View (add_book.html):

  <h1>Add a New Book</h1>
  {{=form}}  <!-- ফর্মটি এখানে প্রদর্শিত হবে -->
  

  এখানে SQLFORM(db.book) ফর্মটি তৈরি করবে এবং তা ভিউতে প্রদর্শিত হবে। যদি ফর্মটি সফলভাবে সাবমিট হয়, তবে একটি ফ্ল্যাশ মেসেজ দেখানো হবে।

৫. ভিউতে স্ট্যাটিক ফাইল ব্যবহার

Web2Py তে CSS, JavaScript বা ইমেজ ফাইলগুলো static ফোল্ডারে রাখা হয়। এগুলোকে ভিউ ফাইলে ইনক্লুড করা যায়।

• স্ট্যাটিক ফাইল ব্যবহার:

  <link rel="stylesheet" href="{{=URL('static', 'css/styles.css')}}">
  <script src="{{=URL('static', 'js/scripts.js')}}"></script>
  

  এখানে static/css/styles.css এবং static/js/scripts.js ফাইলগুলো ওয়েবপেজে লোড হবে।

৬. ভিউ ফাইলের ইনক্লুশন

আপনি একাধিক ভিউ ফাইল তৈরি করতে পারেন এবং তাদের একে অপরের মধ্যে ইনক্লুড করতে পারেন। উদাহরণস্বরূপ, একটি সাধারণ লেআউট বা হেডার/footer ফাইল তৈরি করা যেতে পারে যা অন্যান্য ভিউ ফাইলে ব্যবহার করা যাবে।

• লেআউট ফাইল (layouts/default.html):

  <html>
  <head>
    <title>{{=response.title}}</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Web2Py App</h1>
    </header>
    <section>
      {{=content}}  <!-- এখানে ভিউ কনটেন্ট প্রদর্শিত হবে -->
    </section>
  </body>
  </html>
  

• Controller (default.py):

  def index():
      return dict(message="Hello from Web2Py!")
  

• View (default/index.html):

  {{extend 'layouts/default.html'}}
  <h2>{{=message}}</h2>
  

  এখানে {{extend 'layouts/default.html'}} এর মাধ্যমে লেআউট ফাইলটি ইনক্লুড করা হয়েছে।

সারাংশ

Web2Py তে View ফাইলগুলি ইউজার ইন্টারফেস তৈরির জন্য ব্যবহৃত হয় এবং Python কোড এবং HTML এর সংমিশ্রণ দিয়ে ডায়নামিক কনটেন্ট তৈরি করে।

• View ফাইলের মাধ্যমে আপনি কন্ট্রোলার থেকে প্রাপ্ত ডেটা দেখাতে পারেন।
• SQLFORM ব্যবহার করে ফর্ম তৈরি এবং প্রক্রিয়া করা যায়।
• স্ট্যাটিক ফাইল (CSS, JS, Images) ভিউতে ব্যবহার করা যায়।
• একাধিক ভিউ ফাইলের মধ্যে লেআউট ইনক্লুড করা সম্ভব।

এই প্রক্রিয়াটি Web2Py অ্যাপ্লিকেশনের ফ্রন্টএন্ড তৈরির জন্য একটি কার্যকরী এবং সহজ উপায় প্রদান করে।

Web2Py তে Template Engine এমন একটি সিস্টেম যা ডাইনামিক কনটেন্ট তৈরি করতে ব্যবহৃত হয়। Web2Py এর টেমপ্লেট সিস্টেম ব্যবহার করে আপনি HTML, XML, বা অন্য কোনো ফরম্যাটে ডাইনামিক কনটেন্ট তৈরি করতে পারেন, যা কন্ট্রোলার থেকে প্রাপ্ত ডেটা প্রদর্শন করে। টেমপ্লেট ইঞ্জিনটি কোড এবং কনটেন্ট আলাদা রাখতে সাহায্য করে, যা ওয়েব অ্যাপ্লিকেশনটি আরও পরিষ্কার এবং ব্যবস্থাপনা করা সহজ করে তোলে।

Web2Py এর টেমপ্লেট ইঞ্জিন

Web2Py এর টেমপ্লেট ইঞ্জিন মূলত Python কোডের সাথে HTML বা XML ট্যাগের সংমিশ্রণ ব্যবহার করে। Web2Py টেমপ্লেট ইঞ্জিনটি খুব সহজ এবং কার্যকরী, যা ডাইনামিক কনটেন্ট তৈরির জন্য খুবই উপযোগী।

টেমপ্লেট ফাইলের অবস্থান

Web2Py তে views ফোল্ডারে টেমপ্লেট ফাইল থাকে। সাধারণত এই ফোল্ডারের মধ্যে .html ফাইল থাকে, যা কন্ট্রোলার থেকে প্রাপ্ত ডেটা দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণস্বরূপ:

/your_app_name
  /views
    default/
      index.html
      add_book.html

এখানে index.html এবং add_book.html ফাইল দুটি ভিউ হিসেবে কাজ করে, যেগুলি কন্ট্রোলার থেকে ডেটা গ্রহণ করে এবং ব্যবহারকারীকে প্রদর্শন করে।

Web2Py টেমপ্লেটের গঠন

Web2Py তে টেমপ্লেট ফাইল HTML এর মতোই দেখতে হয়, তবে এতে Python কোডও ব্যবহার করা যায়। Python কোড টেমপ্লেটে যুক্ত করার জন্য {{= ... }} সিনট্যাক্স ব্যবহার করা হয়। এটি কন্ট্রোলার থেকে প্রাপ্ত ডেটা ডাইনামিকভাবে প্রদর্শন করতে সহায়তা করে।

উদাহরণ ১: "Hello, World!" টেমপ্লেট

ধরা যাক, আপনি একটি সিম্পল "Hello, World!" অ্যাপ্লিকেশন তৈরি করতে চান। কন্ট্রোলার থেকে একটি বার্তা পাঠানো হবে এবং টেমপ্লেটে তা প্রদর্শিত হবে।

controllers/default.py:

def index():
    message = "Hello, Web2Py!"
    return dict(message=message)

views/default/index.html:

<h2>{{=message}}</h2>

এখানে, কন্ট্রোলার index() ফাংশন থেকে message ভেরিয়েবল টেমপ্লেটে পাস করা হয়, এবং {{=message}} সিনট্যাক্সের মাধ্যমে এটি HTML তে দেখানো হয়।

উদাহরণ ২: লুপ ব্যবহার করা

Web2Py তে আপনি Python লুপ ব্যবহার করে ডাইনামিক কনটেন্ট তৈরি করতে পারেন। এখানে আমরা একটি বইয়ের তালিকা দেখাবো।

controllers/default.py:

def index():
    books = ["Harry Potter", "Web2Py Guide", "Python Basics"]
    return dict(books=books)

views/default/index.html:

<h2>Books List</h2>
<ul>
    {{for book in books:}}
        <li>{{=book}}</li>
    {{pass}}
</ul>

এখানে, books নামের লিস্টটি কন্ট্রোলার থেকে ভিউতে পাঠানো হয়েছে এবং {{for book in books:}} লুপের মাধ্যমে প্রতিটি বইয়ের নাম একটি <li> ট্যাগে দেখানো হচ্ছে।

উদাহরণ ৩: ফর্ম ব্যবহার

Web2Py তে ফর্ম ব্যবহার করা খুব সহজ। ফর্মের মাধ্যমে ব্যবহারকারীর ইনপুট গ্রহণ করা হয় এবং তারপর তা প্রক্রিয়া করা হয়। ফর্মের ডেটা কন্ট্রোলারে প্রেরিত হয় এবং ফলাফল ভিউতে দেখানো হয়।

controllers/default.py:

def add_book():
    form = SQLFORM(db.book)
    if form.process().accepted:
        response.flash = 'Book Added!'
    return dict(form=form)

views/default/add_book.html:

<h1>Add a New Book</h1>
{{=form}}

এখানে, SQLFORM ব্যবহার করে একটি ফর্ম তৈরি করা হয়েছে, যা একটি বইয়ের নাম ইনপুট নেয় এবং সেটি ডেটাবেসে সংরক্ষণ করে।

টেমপ্লেট ইঞ্জিনের বিশেষ বৈশিষ্ট্য

1. ডাইনামিক ডেটা: টেমপ্লেট সিস্টেমের মাধ্যমে আপনি ডাইনামিকভাবে ডেটা তৈরি এবং প্রদর্শন করতে পারেন, যেমন ইউজারের ইনপুট বা ডেটাবেস থেকে প্রাপ্ত তথ্য।
2. Python কোড ব্যবহার: HTML এর মধ্যে সরাসরি Python কোড যুক্ত করা যায়, যা ডাইনামিক কনটেন্ট তৈরির জন্য খুবই সহায়ক।
3. ফর্ম সমর্থন: Web2Py স্বয়ংক্রিয়ভাবে ফর্ম ভ্যালিডেশন, ফাইল আপলোড, এবং অন্যান্য ইনপুট ফিচার সমর্থন করে, যা টেমপ্লেটের মধ্যে ব্যবহার করা যায়।
4. অপ্টিমাইজড টেমপ্লেট: টেমপ্লেট ইঞ্জিন HTML কোড এবং Python কোডের মধ্যে পারফরম্যান্সের ব্যালান্স তৈরি করে, যার ফলে ওয়েব অ্যাপ্লিকেশন দ্রুত কাজ করে।

Web2Py টেমপ্লেটের Syntax

• Python Expression: {{= expression}}
  • Python এক্সপ্রেশনকে HTML টেমপ্লেটে রেন্ডার করে। যেমন: {{=message}}
• Looping: {{for item in list:}} ... {{pass}}
  • লুপের মাধ্যমে তালিকা বা অন্য কোনও আইটেমের ওপর অপারেশন করা। যেমন: {{for book in books:}} <li>{{=book}}</li> {{pass}}
• Conditionals: {{if condition:}} ... {{else:}} ... {{pass}}

  • কন্ডিশনাল স্টেটমেন্ট ব্যবহার করে নির্দিষ্ট শর্তে আলাদা আলাদা কনটেন্ট দেখানো। যেমন:

    {{if books:}}
        <ul>
            {{for book in books:}}
                <li>{{=book}}</li>
            {{pass}}
        </ul>
    {{else:}}
        <p>No books available.</p>
    {{pass}}
    

সারাংশ

Web2Py এর Template Engine হল একটি শক্তিশালী টুল যা ডাইনামিক কনটেন্ট তৈরি করতে ব্যবহৃত হয়। এটি Python কোড এবং HTML এর সংমিশ্রণ ব্যবহার করে, যাতে ডেভেলপাররা সহজে ডাইনামিক ওয়েব পেজ তৈরি করতে পারেন। টেমপ্লেট সিস্টেমের মাধ্যমে আপনি ডেটাবেস থেকে প্রাপ্ত তথ্য, ফর্ম ইনপুট এবং অন্যান্য ডাইনামিক কনটেন্ট খুব সহজে প্রদর্শন করতে পারেন। Web2Py তে টেমপ্লেট ইঞ্জিন ব্যবহার করে আপনার ওয়েব অ্যাপ্লিকেশন তৈরি করতে আরও বেশি ফ্লেক্সিবিলিটি এবং কার্যকারিতা পাওয়া যায়।

Web2Py-তে Template Inheritance এবং Includes হল এমন দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য, যা ডেভেলপারদের অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় কোড পুনঃব্যবহারযোগ্য এবং সংগঠিত রাখতে সহায়তা করে। এই দুটি বৈশিষ্ট্য ব্যবহার করে আপনি একটি বেস টেমপ্লেট তৈরি করতে পারবেন এবং সেটি ভিউ টেমপ্লেটগুলোর মধ্যে বংশগতির মাধ্যমে পুনরায় ব্যবহার করতে পারবেন।

Template Inheritance

Template Inheritance এর মাধ্যমে আপনি একটি বেস টেমপ্লেট তৈরি করতে পারবেন, যার মধ্যে সাধারণ উপাদান (যেমন, হেডার, ফুটার, ন্যাভিগেশন বার) থাকবে এবং অন্যান্য ভিউগুলো সেই বেস টেমপ্লেটকে "এনহেরিট" করে তাদের নিজস্ব কন্টেন্ট যুক্ত করবে।

Template Inheritance এর মূল ধারণা

1. বেস টেমপ্লেট: এটি একটি সাধারণ টেমপ্লেট যা সাধারণ উপাদান ধারণ করে।
2. চাইল্ড টেমপ্লেট: এটি বেস টেমপ্লেটের উপাদানকে বংশগতভাবে গ্রহণ করে এবং এতে নির্দিষ্ট কন্টেন্ট যোগ করা হয়।

বেস টেমপ্লেট তৈরি (Base Template)

ধরা যাক, আপনি একটি সাধারণ ওয়েবসাইটের জন্য হেডার, ফুটার এবং ন্যাভিগেশন বার সহ একটি বেস টেমপ্লেট তৈরি করতে চান। আপনি এটি layout.html ফাইলের মাধ্যমে তৈরি করতে পারেন:

<!-- views/layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{=response.title}}</title>
</head>
<body>
    <header>
        <h1>My Web2Py Application</h1>
        <nav>
            <ul>
                <li><a href="{{=URL('default', 'index')}}">Home</a></li>
                <li><a href="{{=URL('default', 'about')}}">About</a></li>
            </ul>
        </nav>
    </header>

    <div id="content">
        {{include content}}
    </div>

    <footer>
        <p>© 2024 My Web2Py App</p>
    </footer>
</body>
</html>

এখানে {{include content}} হল একটি সিঙ্গেল প্লেসহোল্ডার যেখানে চাইল্ড টেমপ্লেট থেকে কন্টেন্ট যুক্ত হবে।

চাইল্ড টেমপ্লেট তৈরি (Child Template)

এখন, আপনি index.html নামে একটি চাইল্ড টেমপ্লেট তৈরি করতে পারেন যা বেস টেমপ্লেট (layout.html) থেকে কিছু কন্টেন্ট লোড করবে:

<!-- views/default/index.html -->
{{extend 'layout.html'}}
<h2>Welcome to My Website!</h2>
<p>This is the home page.</p>

এখানে, {{extend 'layout.html'}} কমান্ডটি চাইল্ড টেমপ্লেটটিকে বেস টেমপ্লেটের উপাদানকে ইনহেরিট করার নির্দেশ দেয় এবং চাইল্ড টেমপ্লেটের কন্টেন্টকে বেস টেমপ্লেটের নির্দিষ্ট জায়গায় ইনক্লুড করে।

Includes

Includes হল Web2Py-তে এমন একটি ফিচার যা আপনাকে একাধিক ছোট টেমপ্লেট ফাইলকে মূল টেমপ্লেটে অন্তর্ভুক্ত করার অনুমতি দেয়। এটি কন্টেন্ট বা লজিক ভাগ করতে এবং কোড পুনঃব্যবহারযোগ্য করতে সাহায্য করে।

Includes ব্যবহার

আপনি যদি একটি নির্দিষ্ট অংশ যেমন একটি সাইডবার বা কাস্টম হেডার বার বার ব্যবহার করতে চান, তাহলে আপনি সেই অংশের জন্য আলাদা একটি টেমপ্লেট তৈরি করতে পারেন এবং পরে সেটি মূল টেমপ্লেটে ইনক্লুড করতে পারেন।

ধরা যাক, আপনি একটি sidebar.html টেমপ্লেট তৈরি করতে চান যা প্রতিটি পৃষ্ঠায় ব্যবহার হবে:

<!-- views/default/sidebar.html -->
<aside>
    <h3>Side Bar</h3>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
</aside>

এখন, এই সাইডবারটি আপনার প্রধান টেমপ্লেটে ইনক্লুড করতে হবে:

<!-- views/layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{=response.title}}</title>
</head>
<body>
    <header>
        <h1>My Web2Py Application</h1>
        <nav>
            <ul>
                <li><a href="{{=URL('default', 'index')}}">Home</a></li>
                <li><a href="{{=URL('default', 'about')}}">About</a></li>
            </ul>
        </nav>
    </header>

    <div id="content">
        {{include content}}
    </div>

    <div id="sidebar">
        {{include 'default/sidebar.html'}}
    </div>

    <footer>
        <p>© 2024 My Web2Py App</p>
    </footer>
</body>
</html>

এখানে, {{include 'default/sidebar.html'}} টেমপ্লেটটি sidebar.html ফাইলটি layout.html-এ ইনক্লুড করছে।

Template Inheritance এবং Includes এর সুবিধা

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

সারাংশ

Web2Py-তে Template Inheritance এবং Includes ব্যবহার করে আপনি সহজে কোড পুনঃব্যবহারযোগ্য এবং সংগঠিত রাখতে পারেন। Template Inheritance এর মাধ্যমে আপনি একটি বেস টেমপ্লেট তৈরি করে সেটি অন্যান্য ভিউ টেমপ্লেটের মধ্যে বংশগতির মাধ্যমে ব্যবহার করতে পারেন। Includes এর মাধ্যমে ছোট টেমপ্লেট ফাইলগুলোকে প্রধান টেমপ্লেটে অন্তর্ভুক্ত করে কোডের অংশ ভাগ করতে পারেন, যা অ্যাপ্লিকেশনকে আরও পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।

Web2Py তে CSS এবং JavaScript ফাইলগুলোকে ইন্টিগ্রেট করা খুব সহজ। এগুলো সাধারণত static ফোল্ডারে রাখা হয় এবং HTML ভিউ ফাইলে যোগ করা হয়। Web2Py তে CSS এবং JavaScript ফাইল ইন্টিগ্রেট করার প্রক্রিয়া সরল এবং দ্রুত। এখানে Web2Py তে CSS এবং JavaScript এর সাথে ইন্টিগ্রেশন করার বিস্তারিত পদ্ধতি আলোচনা করা হলো।

Web2Py তে CSS এবং JavaScript ফাইলের ইন্টিগ্রেশন

১. CSS ফাইল যোগ করা

Web2Py তে CSS ফাইলটি static/css/ ফোল্ডারে রাখতে হয়। এরপর সেই CSS ফাইলটি HTML ভিউ ফাইলে লিঙ্ক করতে হবে।

1. CSS ফাইল তৈরি: প্রথমে Web2Py এর static/css/ ফোল্ডারে একটি CSS ফাইল তৈরি করুন, যেমন styles.css।

   উদাহরণস্বরূপ:

   /your_app_name
     /static
       /css
         styles.css
   

2. CSS ফাইলের মধ্যে স্টাইল লেখা: styles.css ফাইলটি খোলার পর, এখানে স্টাইল কোড লিখুন। উদাহরণস্বরূপ:

   body {
       font-family: Arial, sans-serif;
       background-color: #f4f4f4;
   }
   
   h1 {
       color: #333;
   }
   

3. CSS ফাইল HTML ভিউতে যোগ করা: CSS ফাইলটি এখন আপনার HTML ভিউ ফাইলে যুক্ত করতে হবে। Web2Py এর ভিউ ফাইলে CSS ফাইলটি যোগ করার জন্য {{=URL('static', 'css/styles.css')}} ব্যবহার করতে হবে।

   উদাহরণ:

   <!-- views/default/index.html -->
   <!DOCTYPE html>
   <html>
       <head>
           <title>My Web2Py App</title>
           <link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/styles.css')}}">
       </head>
       <body>
           <h1>Welcome to Web2Py</h1>
           <p>This is a simple app using Web2Py and CSS!</p>
       </body>
   </html>
   

এভাবে CSS ফাইলটি HTML ভিউ ফাইলে লিঙ্ক করা হয় এবং এটি ওয়েব পেজের ডিজাইন নির্ধারণ করে।

২. JavaScript ফাইল যোগ করা

JavaScript ফাইলগুলো static/js/ ফোল্ডারে রাখা হয়। এই ফাইলগুলো HTML ভিউ ফাইলে <script> ট্যাগ দিয়ে যোগ করতে হয়।

1. JavaScript ফাইল তৈরি: প্রথমে Web2Py এর static/js/ ফোল্ডারে একটি JavaScript ফাইল তৈরি করুন, যেমন scripts.js।

   উদাহরণস্বরূপ:

   /your_app_name
     /static
       /js
         scripts.js
   

2. JavaScript ফাইলের মধ্যে কোড লেখা: scripts.js ফাইলটি খোলার পর এখানে JavaScript কোড লিখুন। উদাহরণস্বরূপ:

   window.onload = function() {
       alert("Welcome to Web2Py!");
   };
   

3. JavaScript ফাইল HTML ভিউতে যোগ করা: JavaScript ফাইলটি HTML ভিউ ফাইলে যোগ করার জন্য <script> ট্যাগ ব্যবহার করতে হবে। এটি সাধারণত HTML ফাইলের </body> ট্যাগের ঠিক আগে রাখা হয়।

   উদাহরণ:

   <!-- views/default/index.html -->
   <!DOCTYPE html>
   <html>
       <head>
           <title>My Web2Py App</title>
           <link rel="stylesheet" type="text/css" href="{{=URL('static', 'css/styles.css')}}">
       </head>
       <body>
           <h1>Welcome to Web2Py</h1>
           <p>This is a simple app using Web2Py and JavaScript!</p>
   
           <!-- JavaScript inclusion -->
           <script type="text/javascript" src="{{=URL('static', 'js/scripts.js')}}"></script>
       </body>
   </html>
   

এভাবে JavaScript ফাইলটি HTML ভিউ ফাইলে যুক্ত করা হয় এবং ওয়েব পেজে JavaScript কার্যকারিতা নির্ধারণ করে।

CSS এবং JavaScript ফাইলের ব্যবহারের কিছু পরামর্শ

1. ক্যাশিং সমস্যা এড়ানো: মাঝে মাঝে ব্রাউজারে পুরনো CSS বা JavaScript ফাইল ক্যাশ হয়ে যায়, ফলে পরিবর্তন দেখা যায় না। এই সমস্যা এড়ানোর জন্য আপনি ফাইলের নামের শেষে একটি ভার্সন নম্বর যোগ করতে পারেন:

   <link rel="stylesheet" href="{{=URL('static', 'css/styles.css?version=1.0')}}">
   <script type="text/javascript" src="{{=URL('static', 'js/scripts.js?version=1.0')}}"></script>
   

2. ইন্টারঅ্যাক্টিভ ফিচার: JavaScript ব্যবহার করে আপনি ওয়েব পেজের ইন্টারঅ্যাক্টিভ ফিচার তৈরি করতে পারেন, যেমন ফর্ম ভ্যালিডেশন, ইউজার ইন্টারফেসের ডাইনামিক পরিবর্তন ইত্যাদি।

3. Bootstrap বা অন্য CSS ফ্রেমওয়ার্ক ব্যবহার: যদি আপনি আরও উন্নত CSS স্টাইলিং এবং উপাদান ব্যবহার করতে চান, তবে আপনি Bootstrap অথবা অন্য কোনো CSS ফ্রেমওয়ার্ক ইন্টিগ্রেট করতে পারেন। Bootstrap ইন্টিগ্রেট করতে, আপনাকে শুধুমাত্র Bootstrap এর CSS এবং JS ফাইল যুক্ত করতে হবে:

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   

সারাংশ

Web2Py তে CSS এবং JavaScript ফাইল ইন্টিগ্রেট করা খুবই সহজ। আপনাকে শুধু static ফোল্ডারে ফাইলগুলো রাখতে হবে এবং HTML ভিউ ফাইলে তাদের লিঙ্ক করতে হবে। CSS দিয়ে আপনি ওয়েব পেজের ডিজাইন কাস্টমাইজ করতে পারেন, আর JavaScript দিয়ে পেজে ইন্টারঅ্যাক্টিভ ফিচার যোগ করতে পারেন। Web2Py তে CSS এবং JavaScript ফাইলের ব্যবহারের মাধ্যমে আপনি আপনার ওয়েব অ্যাপ্লিকেশনকে আরও কার্যকরী এবং আকর্ষণীয় করে তুলতে পারেন।