ক্র্যাশ খাইছে CRUD
টুং করে তোর কাছে একটা নোটিফিকেশন আসল। তুই বুঝতে পারলি, একটা ই-মেইল আসছে। তুই ই-মেইল খুলে চট করে সেই ই-মেইল পড়ে ফেললি। পড়ার পর মনে হলো, এই ই-মেইল রাখা ঠিক না। তুই ই-মেইল ডিলিট করে দিলি। তার কিছুক্ষণ পরে এসে নতুন একটা ই-মেইল লিখলি। এরপর ভাবলি, আগের ড্রাফট একটা ই-মেইল লেখা ছিল, সেটা এডিট করে আপডেট করবি। তারপর ই-মেইল লিখতে লিখতে তুই টায়ার্ড হয়ে ঘুমায় পড়লি।
এইখানে ভালো করে খেয়াল করলে তুই চারধরনের কাজ করছস।
১. নতুন ই-মেইল লেখা।
২. ই-মেইল পড়া।
৩. ই-মেইলের ড্রাফট এডিট বা আপডেট বা চেইঞ্জ করা।
৪. অপ্রয়োজনীয় ই-মেইল ডিলিট করা।
আমরা যখন ডাটা নিয়ে কাজ করি, তখন ঘুরেফিরে এই চারধরনের কাজ করে।
যে কাজটা সবচেয়ে বেশি হয়, সেটা হচ্ছে সার্ভার বা ডাটাবেজ থেকে ডাটা নিয়ে এসে ওয়েবসাইটে দেখানো। যেমন, আমরা বিভিন্ন ওয়েবসাইটে গিয়ে ভিডিও দেখি, পোস্ট পড়ি— এইসব ডাটা কিন্তু সার্ভার থেকে আসে। আবার অনেক সময় আমরা ভিডিও আপলোড করি বা আর্টিকেল লিখি বা ছবি আপলোড করি। তখন আমরা নতুন ডাটা তৈরি করি।
এ ছাড়া মাঝেমধ্যে পুরান ডাটা মডিফাই করা লাগে। যেমন, একাউন্টের পাসওয়ার্ড চেইঞ্জ করবি। হয়তো তোর নাম, ই-মেইল এড্রেস, ছবি— সব আগের মতো থাকবে, শুধু আগের পাসওয়ার্ড চেইঞ্জ হয়ে নতুন পাসওয়ার্ড আসবে। অর্থাৎ শুধু পাসওয়ার্ডের ডাটা চেইঞ্জ হবে। এইটাকে বলে ডাটা আপডেট করা।
আর লাস্টের বিষয়টা হচ্ছে ডাটা মুছে ফেলা বা ডিলিট করে দেয়া। হয়তো তুই তোর ছবি ডিলিট করতে পারস। না হয় তুই হয়তো তোর পোস্ট বা ভিডিও ডিলিট করতে পারস। একাউন্ট ডিলিট করতে পারস। এইসব ক্ষেত্রে সার্ভার থেকে ডাটা মুছে ফেলতে হয়।
চারটা কাজকে সিরিয়ালমতো লিখলে হয়—
১. Create: ডাটা ক্রিয়েট করা বা নতুন ডাটা বানানো।
২. Read: আগের বানানো ডাটা নিয়ে আসা, এনে দেখানো।
৩. Update: ডাটার একটা অংশ বা পুরা ডাটা চেইঞ্জ বা মডিফাই করা।
৪. Delete: ডাটা ডিলিট করা।
তুই একটু ভালো করে খেয়াল করলে বুঝতে পারবি, এই যে Create, Read, Update, Delete আছে, এই শব্দগুলোর প্রথম অক্ষর নিয়ে হয় CRUD (উচ্চারণ হবে ‘ক্রাড’ : যদিও কেউ কেউ ‘ত্রুড’ বলে), আর এই জন্য ডাটাকে নিয়েই এইসব কাজ করাকে একসাথে অনেকেই বলে CRUD অপারেশন।
আবার অন্যদিকে ডাটা লোড করতে গেলে একটা প্রটোকল বা সিস্টেম ফলো করতে হয়। যেটাকে HTTP (Hypertext Transfer Protocol) বলে। এইটা মূলত ক্লায়েন্ট (যেমন ব্রাউজার) এবং সার্ভারের মধ্যে ডেটা আদান-প্রদান কীভাবে হবে, কী কী জিনিস বলা হলে কী কী করবে, সেই জিনিসগুলোর কিছু রুলস ঠিক করে রাখছে। যাতে সবাই একটা স্ট্যান্ডার্ডভাবে ডাটা বা অন্য জিনিসের Request এবং সেইম স্টাইলে Response করতে পারে।
এই HTTP দিয়ে অনেক ধরনের ফাইল বা ডাটা নিয়ে কাজ করা যায়। তবে আমরা শুধু ডাটা নিয়ে আলোচনা করব। ডাটা নিয়ে যে কাজগুলো হয়, তাদের মধ্যে পাঁচটা জিনিস খুবই কমন।
GET: সার্ভার থেকে ডাটা পাওয়া।
POST: সার্ভারে নতুন ডাটা যোগ করা।
PUT: সম্পূর্ণ ডাটা আপডেট।
PATCH: আংশিক ডাটা আপডেট।
DELETE: ডাটা মুছে ফেলা।
এইগুলা হচ্ছে HTTP-এর মেথড বা verb বলে, যেটা ক্লায়েন্ট সাইড থেকে সার্ভার সাইডে কমিউনিকেশনের জন্য কাজে লাগে। অন্যদিকে শুধু ডাটা নিয়ে কাজ করতে গেলে CRUD আসে। তবে দুইটার মধ্যে কাজের পরিধি আলাদা হলেও থিঙ্কিয়ে অনেক মিল আছে।
Create → POST
Read → GET
Update → PATCH/PUT
Delete → DELETE
Read/Get
ডাটা লোড করা বা Get করা খুবই সিম্পল। জাস্ট একটা url দিবি, যেখান থেকে ডাটা লোড করার পারমিশন আছে। পারমিশন থাকলে ডাটা দিয়ে দিবে। পারমিশন না থাকলে ডাটা দিবে না। তারপর fetch মেরে দিবি নিচের মতো করে—
const url = "https://jsonplaceholder.typicode.com/users";
fetch(url)
.then((res) => res.json())
.then((data) => console.log(data));Create/Post
ডাটা ক্রিয়েট বা পোস্ট করা get-এর কাছাকাছি। শুধু url-এর পরে কমা দিয়ে একটা প্যারামিটার যোগ করতে হয়। যেটাকে অনেকেই option নাম দেয়। সেটার ভিতরে বলে দিতে হয়, http মেথড হবে POST। আবার ডাটা বা Content-type যে JSON, সেটা বলতে হয় headers-এর মধ্যে।
আর সবচেয়ে বড় কথা হচ্ছে, body-এর মধ্যে ডাটা যোগ করতে হয় JSON.stringify-এর ভিতরে। এইটা প্রথম প্রথম বেখাপ্পা লাগবে। ব্যাপার না। করতে করতে কিছুদিন পরে নরমাল হয়ে আসবে।
const url = 'https://example.com/api/user';
const user = { name: 'John Doe', email: 'john.doe@example.com' }
const options = {
method: 'POST',
body: JSON.stringify(user),
headers: {
'Content-type': 'application/json',
},
}
fetch(url, options)
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error));Update (Put, Patch)
PUT আর PATCH কাছাকাছি, তবে PUT ডেটা সম্পূর্ণ পরিবর্তন করতে বা না থাকলে নতুন তৈরি করতে ব্যবহৃত হয়। PATCH শুধু ডাটার একটা অংশ পরিবর্তন করার জন্য ইউজ করা হয়।
ডাটা মডিফাই বা আপডেট করার জন্য PUT ইউজ করলে ক্লায়েন্ট সাইডে অলমোস্ট POST-এর মতো। তবে fetch-এর options-এর মধ্যে মেথডের জায়গায় PUT লিখতে হবে। আগের মতোই url থাকবে, content টাইপ headers-এর মধ্যে json বলে দিতে হবে এবং body-এর মধ্যে ডাটা JSON.stringify-এর ভিতরে দিতে হবে এবং url-এর মধ্যে খেয়াল করবি, একটা আইডি বা সংখ্যা আছে। যেটা দিয়ে সার্ভার সাইড বুঝবে, কার ডাটা আপডেট করতে হবে।
const url = 'https://jsonplaceholder.typicode.com/users/1';
const updatedUser = { name: 'John Doe', email: 'john.doe@newemail.com' };
const options = {
method: 'PUT',
body: JSON.stringify(updatedUser),
headers: {
'Content-type': 'application/json',
},
};
fetch(url, options)
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error));Delete Example
ডিলিট আরেকটু সোজা। জাস্ট url-এর মধ্যে এইটা আইডি বা সংখ্যা থাকবে। যেটা দিয়ে সার্ভার সাইডে বুঝবে, কাকে ডিলিট করতে হবে। আর fetch-এর মধ্যে options-এ বলে দিবি, মেথড হবে ডিলিট, তাহলেই সার্ভার সাইডে পারমিশন থাকলে ডাটা ডিলিট হয়ে যাবে।
const url = 'https://jsonplaceholder.typicode.com/users/1';
const options = {
method: 'DELETE',
};
fetch(url, options)
.then(res => res.json())
.then(data => console.log('Deleted:', data))
.catch(error => console.error(error));Practice:
- প্রোফাইল সিঙ্গেল নাকি মেরিড, এই টাইপের ডাটা চেইঞ্জ করলে PUT না PATCH হবে?
- ডাটাবেজে নতুন ইনফরমেশন যোগ করার জন্য কোন HTTP মেথড ব্যবহৃত হয়?
- একটা ওয়েবসাইটে যখন ভিডিও দেখতে যাবি, তখন কী ধরনের অপারেশন হয়?
- CRUD কী জিনিস?
- HTTP-এর মেথড বা verb কী কী আছে? কোনটা কী কাজ করে?