এখানে আমরা একটি পূর্ণাঙ্গ BackboneJS প্রজেক্ট তৈরি করব, যা Model, View, এবং Collection এর সাথে Router এবং Event Handling ব্যবহার করবে। আমরা একটি বুক ম্যানেজমেন্ট অ্যাপ তৈরি করব যেখানে বইয়ের তথ্য যোগ, সম্পাদনা এবং মুছে ফেলা যাবে।
1. প্রজেক্টের কাঠামো
আমাদের প্রজেক্টের কাঠামো হবে এরকম:
/backbone-book-app
/index.html
/js
/app.js
/models
/book.js
/views
/bookView.js
/collections
/bookCollection.js
2. প্রজেক্টের HTML ফাইল তৈরি
প্রথমে, আমরা একটি index.html ফাইল তৈরি করব যেখানে BackboneJS এর স্ক্রিপ্ট এবং আমাদের কাস্টম JS ফাইলগুলি যুক্ত হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Backbone Book Management App</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone-min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="app">
<h1>Book Management App</h1>
<div id="book-list"></div>
<button id="add-book">Add Book</button>
</div>
</body>
</html>
এখানে:
- jQuery, Underscore.js, এবং Backbone.js এর CDN ব্যবহার করা হয়েছে।
- app.js ফাইলটি হল আমাদের মূল স্ক্রিপ্ট যা সকল কাস্টম মডেল, ভিউ, এবং কন্ট্রোলার কোড ধারণ করবে।
3. Backbone Model তৈরি করা
আমরা একটি Book মডেল তৈরি করব যা বইয়ের নাম এবং লেখক রাখবে।
/js/models/book.js:
var Book = Backbone.Model.extend({
defaults: {
title: 'Untitled Book',
author: 'Unknown Author'
},
validate: function(attrs) {
if (!attrs.title) {
return 'Title is required';
}
}
});
এখানে:
- Book মডেলটি দুটি প্রপার্টি (title এবং author) ধারণ করবে।
- যদি title সেট করা না হয়, তাহলে একটি validation মেসেজ দেখাবে।
4. Backbone Collection তৈরি করা
এখন আমরা একটি BookCollection তৈরি করব যা একাধিক Book মডেল ধারণ করবে।
/js/collections/bookCollection.js:
var BookCollection = Backbone.Collection.extend({
model: Book
});
এখানে:
- BookCollection একটি Collection যা Book মডেল ধারণ করবে।
- Collection এর মাধ্যমে আমরা একাধিক বইয়ের ডেটা ম্যানেজ করতে পারব।
5. Backbone View তৈরি করা
এখন আমরা একটি BookView তৈরি করব যা Book মডেল এবং BookCollection রেন্ডার করবে।
/js/views/bookView.js:
var BookView = Backbone.View.extend({
tagName: 'div',
className: 'book-item',
template: _.template('<h3><%= title %></h3><p><%= author %></p><button class="delete">Delete</button>'),
events: {
'click .delete': 'deleteBook'
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
deleteBook: function() {
this.model.destroy();
this.remove();
}
});
এখানে:
- BookView একটি ভিউ যা বইয়ের তথ্য রেন্ডার করবে এবং delete বাটনের মাধ্যমে বইটি মুছে ফেলবে।
- render() মেথডটি HTML টেমপ্লেট ব্যবহার করে বইয়ের নাম এবং লেখক রেন্ডার করবে।
- deleteBook() মেথডটি মডেল ডিলিট করে এবং ভিউটিকে মুছে ফেলবে।
6. Backbone Router তৈরি করা
একটি Router তৈরি করা হবে, যা URL রাউটিং হ্যান্ডেল করবে এবং অ্যাপ্লিকেশনের বিভিন্ন অংশে রিডিরেক্ট করবে।
/js/app.js:
var AppRouter = Backbone.Router.extend({
routes: {
'': 'showBooks',
'add': 'addBook'
},
initialize: function() {
this.books = new BookCollection();
this.booksView = new BooksView({ collection: this.books });
},
showBooks: function() {
this.books.fetch({
success: function(collection, response, options) {
$('#book-list').html(this.booksView.render().el);
}.bind(this)
});
},
addBook: function() {
var book = new Book({ title: 'New Book', author: 'Unknown' });
this.books.add(book);
var bookView = new BookView({ model: book });
$('#book-list').append(bookView.render().el);
}
});
var router = new AppRouter();
Backbone.history.start();
এখানে:
- AppRouter URL রাউটিং পরিচালনা করে। showBooks() সমস্ত বই দেখানোর জন্য এবং addBook() নতুন বই যোগ করার জন্য ব্যবহৃত হয়।
- initialize() মেথডে একটি নতুন BookCollection এবং BooksView তৈরি করা হয়েছে।
7. BooksView তৈরি করা
এখন, আমাদের BooksView তৈরি করতে হবে যা সমস্ত বইয়ের তথ্য রেন্ডার করবে।
/js/views/booksView.js:
var BooksView = Backbone.View.extend({
tagName: 'div',
className: 'book-list',
initialize: function() {
this.listenTo(this.collection, 'add', this.renderBook);
this.listenTo(this.collection, 'remove', this.render);
},
render: function() {
this.$el.empty();
this.collection.each(this.renderBook, this);
return this;
},
renderBook: function(book) {
var bookView = new BookView({ model: book });
this.$el.append(bookView.render().el);
}
});
এখানে:
- BooksView একটি ভিউ যা BookCollection এর প্রতিটি মডেল রেন্ডার করবে।
- render() মেথডটি সব বইয়ের BookView রেন্ডার করবে।
- renderBook() মেথডটি একটি একক বইয়ের জন্য BookView তৈরি করবে এবং রেন্ডার করবে।
8. এটি একসাথে কাজ করা
এখন, আমাদের app.js ফাইলটি আপডেট করা হবে যাতে সবগুলো অংশ একত্রে কাজ করে।
/js/app.js (আপডেটেড):
$(document).ready(function() {
var AppRouter = Backbone.Router.extend({
routes: {
'': 'showBooks',
'add': 'addBook'
},
initialize: function() {
this.books = new BookCollection();
this.booksView = new BooksView({ collection: this.books });
this.books.fetch();
},
showBooks: function() {
$('#book-list').html(this.booksView.render().el);
},
addBook: function() {
var newBook = new Book({ title: 'New Book', author: 'Anonymous' });
this.books.add(newBook);
var newBookView = new BookView({ model: newBook });
$('#book-list').append(newBookView.render().el);
}
});
var appRouter = new AppRouter();
Backbone.history.start();
$('#add-book').click(function() {
appRouter.navigate('add', { trigger: true });
});
});
এখানে:
- add-book বাটনে ক্লিক করলে নতুন বই যোগ করা হবে এবং Backbone Router এর addBook() মেথড কল হবে।
- showBooks() মেথডটি সমস্ত বইয়ের তালিকা রেন্ডার করবে।
সারাংশ
এটি ছিল একটি পূর্ণাঙ্গ BackboneJS প্রজেক্ট তৈরির প্রক্রিয়া। এই প্রজেক্টে আমরা Model, View, Collection, এবং Router ব্যবহার করেছি:
- Model দিয়ে বইয়ের তথ্য পরিচালনা।
- View দিয়ে UI রেন্ডারিং।
- Collection দিয়ে একাধিক মডেল ধারণ করা।
- Router দিয়ে URL রাউটিং এবং বিভিন্ন অ্যাপ্লিকেশন স্টেট পরিচালনা করা।
এই প্রজেক্টটি একটি সিম্পল বই ম্যানেজমেন্ট অ্যাপ, যা BackboneJS এর মূল ধারণ
াগুলি দেখানোর জন্য আদর্শ উদাহরণ।
Read more
