টেমপ্লেট ব্যাবহার
আমাদের index ভিউটি “Hello World!” লেখাটিকে রেসপন্স হিসেবে পাঠাচ্ছে, যদিও এটা একটা স্ট্রিং কিন্তু ব্রাউজার এটাকে এইচটিএমএল (HTML) হিসেবেই রেন্ডার বা প্রদর্শন করে! এর মানে হল, ভিউটি যদি ‘শুধু স্ট্রিং’ এর বদলে এইচটিএমএল ট্যাগ সহ স্ট্রিং রিটার্ন করত তাহলে সেটাকেও ব্রাউজার সুন্দর ভাবে প্রদর্শন করতে পারত।
বিষয়টা হাতে কলমে করে দেখা যাক, ইন্ডেক্স ভিউটিকে আপডেট করে স্ট্রিং এর মধ্যে একটা এইচটিএমএল ট্যাগ বসিয়ে দিন এভাবেঃ
আমরা হ্যালো ওয়ার্ল্ড লেখাটিকে এইচটিএমএল এর H1 ট্যাগ এর ভিতরে রাখলাম, খেয়াল করুন, ট্যাগসহ পুরো লাইনটাই কিন্তু স্ট্রিং হিসেবে আছে!
এখন আবার ব্রাউজারে এইঠিকানায় যায় http://127.0.0.1:8000/myview/
(ডেভ সার্ভার চালু করতে ভুলবেননা যান) । কোন পরিবর্তন দেখতে পেলেন? আমাদের Hello World! লেখাটি এখন আগের চেয়ে বড় দেখা যাচ্ছে!
ব্রাউজার প্রতিটা রেসপন্সকেই আসলে এইচটিএমএল ওয়েবপেইজ হিসেবে প্রদর্শন করে! সমস্যা হল, আমাদের রেসপন্স কিন্তু সব সময় এরকম হ্যালো ওয়ার্ল্ড এর মধ্যে সীমাবদ্ধয় থাকবেনা, আরো অনেক কনটেন্ট যুক্ত হবে, অনেক এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট কোড যুক্ত হবে... এমনকি রেসপন্সটা কয়েক হাজার লাইনের এইচটিএমএল/সিএসএস যুক্ত কনটেন্ট হতে পারে!
আমাদের ইনডেক্স ভিউ ফাংশনটিতেই যদি আমরা সম্পুর্ন এইচটিএমএল কোড যুক্ত করি তাহলে সেটা এরকম হবেঃ
এটা এখনই বিদঘুটে লাগছে! এরপর যদি সিএসএস যুক্ত ফুল ফিচার্ড একটা এইচটিএমএল পেইজ করতে চাই তাহলে ভিউ ফাংশনকে আর খুজেই পাওয়া যাবেনা !
এই সমস্যার সহজ সমাধান হল জ্যাঙ্গো ট্যামপ্লেট ল্যাঙ্গুয়েজ! আপনি ভিউ ফাংশন থেকে রেসপন্স এর কনটেন্ট (এইচটিএমএল/সিএসএস/জাভাস্ক্রিপ্ট) আলাদা করে ফেলবেন, জাস্ট অন্য একটা ফাইলে সকল কনটেন্ট থাকবে, ভিউ ফাংশনটা শুধু সেই ফাইলকে রেন্ডার করে রেসপন্স হিসেবে রিটার্ন করবে!
টেমপ্লেট ব্যবহার করতে প্রথমে myapp ফোল্ডারের ভিতরে templates নামে একটা ফোল্ডার তৈরি করুন! তারপর সে টেমপ্লেট ফোল্ডারে index.html নামে একটা ফাইল তৈরি করুন! ডিরেক্টরি দেখতে এরকম হবে myproject/myapp/templates/index.html
তারপর index.html ফাইলটিকে টেক্সট এডিটরে ওপেন করে এই কনটেন্টগুলো যুক্ত করে দিনঃ
এখন ভিউ ফাংশনটিকে এডিট করে এরকম করুনঃ
ভিউ থেকে এইচটিএমএল কনটেন্টগুলো আলাদা করা গেল, তবে ভিউতে আমরা এখন HttpResponse এর পরিবর্তে render অবজেক্ট রিটার্ন করছি, render দুটি প্যারামিটার গ্রহন করছে, একটি হল request অবজেক্ট, আপাতত এটা ইগনোর করুন (তবে render এর প্রথম আর্গুমেন্ট হিসেবে দিতে ভুলবেননা)! দ্বিতীয় আর্গুমেন্ট হিসেবে আছে আমাদের টেমপ্লেট ফাইল (যেটা একটু আগে তৈরি করলাম) এর নাম, স্ট্রিং হিসেবে।
views.py ফাইল এর প্রথম লাইনে দেখবেন render ফাংশন ইম্পোর্ট করাই আছে, তবে না থাকলে ইম্পোর্ট করে নিনঃ
এখন আবার ডেভ সার্ভার চালু করে ব্রাউজারে http://127.0.0.1:8000/myview/ ঠিকানায় যান, কোন পরিবর্তন দেখতে পাবেননা আশা করি, আগের মতই Hello World! লেখাটে বড় করে দেখা যাবে! যদি এরকমটি না হয় তাহলে এই চ্যাপ্টারটি আবার শুরু থেকে পড়ুন, খুঁজে বের করুন কোথাও কোন ভুল হয়েছে কিনা!
আপনার কাছে এখন হয়ত এটা মনে হতে পারে যে আলাদা ভাবে ট্যামপ্লেট ব্যবহার করাটা আরো বেশি ঝামেলার, অথবা অপ্রয়োজনীয়! হতাশ হবেননা... টেমপ্লেট এর কার্যকারিতা এবং সৌন্দর্য আস্তে আস্তে আমাদের সামনে উদ্ভাসিত হবে !!
Last updated