# টেমপ্লেট ব্যাবহার

আমাদের index ভিউটি “Hello World!” লেখাটিকে রেসপন্স হিসেবে পাঠাচ্ছে, যদিও এটা একটা স্ট্রিং কিন্তু ব্রাউজার এটাকে এইচটিএমএল (HTML) হিসেবেই রেন্ডার বা প্রদর্শন করে! এর মানে হল, ভিউটি যদি ‘শুধু স্ট্রিং’ এর বদলে এইচটিএমএল ট্যাগ সহ স্ট্রিং রিটার্ন করত তাহলে সেটাকেও ব্রাউজার সুন্দর ভাবে প্রদর্শন করতে পারত।

বিষয়টা হাতে কলমে করে দেখা যাক, ইন্ডেক্স ভিউটিকে আপডেট করে স্ট্রিং এর মধ্যে একটা এইচটিএমএল ট্যাগ বসিয়ে দিন এভাবেঃ

```
def index(request):
    return HttpResponse(“<h1>Hello World!”</h1>”)
```

আমরা হ্যালো ওয়ার্ল্ড লেখাটিকে এইচটিএমএল এর H1 ট্যাগ এর ভিতরে রাখলাম, খেয়াল করুন, ট্যাগসহ পুরো লাইনটাই কিন্তু স্ট্রিং হিসেবে আছে!

এখন আবার ব্রাউজারে এইঠিকানায় যায় <http://127.0.0.1:8000/myview/>

(ডেভ সার্ভার চালু করতে ভুলবেননা যান) । কোন পরিবর্তন দেখতে পেলেন? আমাদের Hello World! লেখাটি এখন আগের চেয়ে বড় দেখা যাচ্ছে!

ব্রাউজার প্রতিটা রেসপন্সকেই আসলে এইচটিএমএল ওয়েবপেইজ হিসেবে প্রদর্শন করে! সমস্যা হল, আমাদের রেসপন্স কিন্তু সব সময় এরকম হ্যালো ওয়ার্ল্ড এর মধ্যে সীমাবদ্ধয় থাকবেনা, আরো অনেক কনটেন্ট যুক্ত হবে, অনেক এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট কোড যুক্ত হবে... এমনকি রেসপন্সটা কয়েক হাজার লাইনের এইচটিএমএল/সিএসএস যুক্ত কনটেন্ট হতে পারে!

আমাদের ইনডেক্স ভিউ ফাংশনটিতেই যদি আমরা সম্পুর্ন এইচটিএমএল কোড যুক্ত করি তাহলে সেটা এরকম হবেঃ

```
def index(request):
    response_string = “””<!DOCTYPE html>
    <html>
    <head>
    <title>My view</title>
    <head>
    <body>
    <h1>Hello World!</h1>
    </body>
    <html>”””

    return HttpResponse(response_string)
```

এটা এখনই বিদঘুটে লাগছে! এরপর যদি সিএসএস যুক্ত ফুল ফিচার্ড একটা এইচটিএমএল পেইজ করতে চাই তাহলে ভিউ ফাংশনকে আর খুজেই পাওয়া যাবেনা !

এই সমস্যার সহজ সমাধান হল জ্যাঙ্গো ট্যামপ্লেট ল্যাঙ্গুয়েজ! আপনি ভিউ ফাংশন থেকে রেসপন্স এর কনটেন্ট (এইচটিএমএল/সিএসএস/জাভাস্ক্রিপ্ট) আলাদা করে ফেলবেন, জাস্ট অন্য একটা ফাইলে সকল কনটেন্ট থাকবে, ভিউ ফাংশনটা শুধু সেই ফাইলকে রেন্ডার করে রেসপন্স হিসেবে রিটার্ন করবে!

টেমপ্লেট ব্যবহার করতে প্রথমে myapp ফোল্ডারের ভিতরে templates নামে একটা ফোল্ডার তৈরি করুন! তারপর সে টেমপ্লেট ফোল্ডারে index.html নামে একটা ফাইল তৈরি করুন! ডিরেক্টরি দেখতে এরকম হবে myproject/myapp/templates/index.html

তারপর index.html ফাইলটিকে টেক্সট এডিটরে ওপেন করে এই কনটেন্টগুলো যুক্ত করে দিনঃ

```
<!DOCTYPE html>
<html>
    <head>
        <title>My view</title>
    <head>
    <body>
        <h1>Hello World!</h1>
    </body>
<html>
```

এখন ভিউ ফাংশনটিকে এডিট করে এরকম করুনঃ

```
def index(request):
    return render(request, 'index.html')
```

ভিউ থেকে এইচটিএমএল কনটেন্টগুলো আলাদা করা গেল, তবে ভিউতে আমরা এখন HttpResponse এর পরিবর্তে render অবজেক্ট রিটার্ন করছি, render দুটি প্যারামিটার গ্রহন করছে, একটি হল request অবজেক্ট, আপাতত এটা ইগনোর করুন (তবে render এর প্রথম আর্গুমেন্ট হিসেবে দিতে ভুলবেননা)! দ্বিতীয় আর্গুমেন্ট হিসেবে আছে আমাদের টেমপ্লেট ফাইল (যেটা একটু আগে তৈরি করলাম) এর নাম, স্ট্রিং হিসেবে।

> views.py ফাইল এর প্রথম লাইনে দেখবেন render ফাংশন ইম্পোর্ট করাই আছে, তবে না থাকলে ইম্পোর্ট করে নিনঃ
>
> ```
> from django.shortcut import render
> ```

এখন আবার ডেভ সার্ভার চালু করে ব্রাউজারে <http://127.0.0.1:8000/myview/> ঠিকানায় যান, কোন পরিবর্তন দেখতে পাবেননা আশা করি, আগের মতই Hello World! লেখাটে বড় করে দেখা যাবে! যদি এরকমটি না হয় তাহলে এই চ্যাপ্টারটি আবার শুরু থেকে পড়ুন, খুঁজে বের করুন কোথাও কোন ভুল হয়েছে কিনা!

আপনার কাছে এখন হয়ত এটা মনে হতে পারে যে আলাদা ভাবে ট্যামপ্লেট ব্যবহার করাটা আরো বেশি ঝামেলার, অথবা অপ্রয়োজনীয়! হতাশ হবেননা... টেমপ্লেট এর কার্যকারিতা এবং সৌন্দর্য আস্তে আস্তে আমাদের সামনে উদ্ভাসিত হবে !!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://django.howtocode.dev/introduction_to_template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
