Web2Py এবং Angular.js একসাথে ব্যবহৃত হলে আপনি একটি শক্তিশালী, ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন। Web2Py হল একটি Python ভিত্তিক ওয়েব ফ্রেমওয়ার্ক, যেখানে আপনি সাধারণত সার্ভার সাইড লজিক পরিচালনা করবেন, এবং Angular.js হল একটি JavaScript ফ্রেমওয়ার্ক যা ক্লায়েন্ট সাইডে ডাইনামিক এবং রিঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়।
Web2Py এবং Angular.js এর ইন্টিগ্রেশন মূলত RESTful APIs ব্যবহার করে করা হয়, যেখানে Web2Py সার্ভার সাইডে ডেটা প্রদান করে এবং Angular.js ফ্রন্টএন্ডে ডাইনামিকভাবে সেই ডেটা প্রদর্শন করে।
এখানে Web2Py এবং Angular.js ইন্টিগ্রেশন করার জন্য একটি সিম্পল উদাহরণ দেওয়া হয়েছে।
১. Web2Py তে API তৈরি করা
প্রথমে Web2Py তে একটি RESTful API তৈরি করতে হবে যা Angular.js ক্লায়েন্ট থেকে ডেটা রিটার্ন করবে। এখানে একটি সিম্পল GET API তৈরি করা হয়েছে যা বইয়ের তালিকা প্রদান করবে।
controllers/default.py:
def books():
# ডাটাবেস থেকে সমস্ত বইয়ের তালিকা নেওয়া
books = db().select(db.book.ALL)
# JSON ফরম্যাটে রিটার্ন করা
return response.json(dict(books=[book.as_dict() for book in books]))
এখানে, books() ফাংশনটি GET রিকোয়েস্টে db.book টেবিল থেকে বইয়ের তালিকা নেয় এবং তা JSON ফরম্যাটে রিটার্ন করে।
২. Angular.js ফ্রন্টএন্ড তৈরি করা
এখন আমরা Angular.js ব্যবহার করে একটি ফ্রন্টএন্ড তৈরি করব যা Web2Py থেকে ডেটা ফেচ করে এবং HTML এ প্রদর্শন করবে।
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Web2Py and Angular.js Integration</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="BooksController">
<h2>Books List</h2>
<ul>
<li ng-repeat="book in books">{{ book.title }} by {{ book.author }}</li>
</ul>
</div>
</body>
</html>
এখানে, ng-controller="BooksController" ডিরেক্টিভ Angular.js এর কন্ট্রোলারকে নির্ধারণ করে। এই কন্ট্রোলারটি Web2Py থেকে ডেটা ফেচ করবে এবং ng-repeat এর মাধ্যমে বইয়ের তালিকা প্রদর্শন করবে।
app.js:
var app = angular.module('myApp', []);
app.controller('BooksController', function($scope, $http) {
// Web2Py থেকে API কল করা
$http.get('/default/books')
.then(function(response) {
$scope.books = response.data.books; // ডেটা স্কোপে রাখা
}, function(error) {
console.log('Error fetching books:', error);
});
});
এখানে, $http.get('/default/books') Web2Py এর API এ GET রিকোয়েস্ট পাঠাচ্ছে, যা books() ফাংশন দ্বারা পরিচালিত হবে। সফলভাবে ডেটা প্রাপ্ত হলে তা $scope.books এ রাখা হচ্ছে এবং HTML এ প্রদর্শন করা হবে।
৩. Web2Py এবং Angular.js ইন্টিগ্রেশন এর ফ্লো
- Angular.js ফ্রন্টএন্ড: Angular.js ক্লায়েন্ট সাইডে ডাইনামিক UI তৈরি করে এবং সার্ভার থেকে ডেটা ফেচ করতে HTTP রিকোয়েস্ট পাঠায়।
- Web2Py সার্ভার সাইড: Web2Py সার্ভার সাইডে API তৈরি করে এবং ক্লায়েন্টের রিকোয়েস্টে JSON ফরম্যাটে ডেটা রিটার্ন করে।
- ডেটা প্রদর্শন: Angular.js ফ্রন্টএন্ড প্রাপ্ত ডেটা ng-repeat ব্যবহার করে ইউজার ইন্টারফেসে প্রদর্শন করে।
৪. Web2Py এবং Angular.js এর মধ্যে CORS (Cross-Origin Resource Sharing) কনফিগারেশন
যদি আপনার Web2Py অ্যাপ্লিকেশন এবং Angular.js ক্লায়েন্ট সাইড আলাদা ডোমেইনে চলে, তবে CORS পলিসি সক্রিয় করতে হবে যাতে দুইটি সিস্টেম একে অপরের সাথে যোগাযোগ করতে পারে। Web2Py তে CORS কনফিগার করতে gluon/globals.py ফাইলে response.headers ব্যবহার করতে হবে।
CORS কনফিগারেশন:
# controllers/default.py
def books():
# CORS হেডার যোগ করা
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE'
response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization'
books = db().select(db.book.ALL)
return response.json(dict(books=[book.as_dict() for book in books]))
এখানে, Access-Control-Allow-Origin: * হেডারটি ক্লায়েন্ট সাইড থেকে যেকোনো ডোমেইনকে API কল করার অনুমতি দিচ্ছে।
৫. Angular.js ক্লায়েন্ট এবং Web2Py অ্যাপ্লিকেশন একত্রে চালানো
- Web2Py এর সার্ভারে API চালু করা হবে এবং Angular.js ফ্রন্টএন্ডকে
localhostবা অন্য সার্ভারে হোস্ট করা হবে। - যদি আপনি Angular.js অ্যাপ্লিকেশনটি প্রোডাকশনে ডেপ্লয় করতে চান, তাহলে আপনি সাধারণত NGINX বা Apache দিয়ে Angular.js অ্যাপ্লিকেশনটি হোস্ট করবেন এবং Web2Py সার্ভারটি API এর জন্য ব্যবহৃত হবে।
সারাংশ
Web2Py এবং Angular.js ইন্টিগ্রেশন করার মাধ্যমে আপনি RESTful APIs ব্যবহার করে একটি ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারেন, যেখানে Web2Py সার্ভার সাইড ডেটা প্রদান করে এবং Angular.js ক্লায়েন্ট সাইডে ডেটা প্রদর্শন করে। এই ইন্টিগ্রেশন ব্যবস্থায় GET API, HTTP requests, এবং JSON responses ব্যবহৃত হয় এবং CORS কনফিগারেশন নিশ্চিত করা হয় যাতে ডোমেইনগুলির মধ্যে সঠিকভাবে যোগাযোগ হয়।
Read more
