একটি User Login এবং Logout System হল একটি ওয়েব অ্যাপ্লিকেশনের মৌলিক ফিচার যা ব্যবহারকারীর অথেন্টিকেশন এবং সেশন ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। ExtJS ব্যবহার করে আপনি সহজেই একটি লগইন এবং লগআউট সিস্টেম তৈরি করতে পারেন, যেখানে ব্যবহারকারী তাদের ইউজারনেম এবং পাসওয়ার্ড দিয়ে সিস্টেমে লগইন করতে পারবে এবং লগআউট করার সময় সেশন বন্ধ হবে।
এই গাইডে, আমরা User Login এবং Logout ফিচার তৈরি করার জন্য প্রয়োজনীয় স্টেপগুলো দেখাবো। এর মধ্যে ফর্ম, ইন্টারফেস, এবং সেশন ম্যানেজমেন্ট অন্তর্ভুক্ত থাকবে।
১. Login Form তৈরি করা
লগইন ফর্ম তৈরি করার জন্য Ext.form.Panel ব্যবহার করা হবে, যেখানে দুটি ইনপুট ফিল্ড থাকবে: একটি ইউজারনেম এবং একটি পাসওয়ার্ড।
Login Form উদাহরণ:
Ext.create('Ext.form.Panel', {
title: 'Login Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false // ফিল্ডটি খালি রাখা যাবে না
}, {
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password', // পাসওয়ার্ড ইনপুট
allowBlank: false
}],
buttons: [{
text: 'Login',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
var values = form.getValues();
var username = values.username;
var password = values.password;
// সাইন-ইন ফাংশন কল করা
authenticateUser(username, password);
}
}
}]
});
function authenticateUser(username, password) {
// এখানে সার্ভার সাইড অথেন্টিকেশন কোড যোগ করুন
if (username === 'admin' && password === 'password123') {
alert('Login successful!');
// সেশন সেটিং এবং UI আপডেট
Ext.getBody().setStyle('background-color', '#e0f7fa'); // ব্যাকগ্রাউন্ড রঙ পরিবর্তন
} else {
alert('Invalid username or password.');
}
}
এখানে:
xtype: 'textfield': ইউজারনেম এবং পাসওয়ার্ড ইনপুট ফিল্ড তৈরি করা হয়েছে।inputType: 'password': পাসওয়ার্ড ইনপুট ফিল্ডের জন্য পাসওয়ার্ড টাইপ নির্ধারণ করা হয়েছে।handler: লগইন বাটনে ক্লিক করার পর সার্ভার সাইড অথেন্টিকেশন ফাংশনauthenticateUser()কল করা হয়েছে।authenticateUser(): এখানে একটি বেসিক অথেন্টিকেশন লজিক প্রয়োগ করা হয়েছে। ইউজারনেম এবং পাসওয়ার্ড যাচাই করা হয় এবং সফল হলে লগইন সফল বার্তা দেখানো হয়।
২. Logout System
একটি লগআউট সিস্টেম ব্যবহারকারীকে তাদের সেশন শেষ করতে দেয়। লগআউট করার পর, ব্যবহারকারীর তথ্য মুছে ফেলা হয় এবং তাদের লগইন ফর্মে ফিরে যাওয়ার জন্য প্রস্তুত হয়।
Logout উদাহরণ:
Ext.create('Ext.Button', {
text: 'Logout',
renderTo: Ext.getBody(),
handler: function() {
logoutUser();
}
});
function logoutUser() {
// সেশন মুছে ফেলা এবং UI আপডেট
alert('You have logged out!');
Ext.getBody().setStyle('background-color', '#ffffff'); // ব্যাকগ্রাউন্ড রঙ রিসেট
// লগআউট হওয়ার পর লগইন ফর্মে ফিরে যাওয়ার ব্যবস্থা
Ext.create('Ext.form.Panel', {
title: 'Login Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false
}],
buttons: [{
text: 'Login',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
var values = form.getValues();
var username = values.username;
var password = values.password;
// সাইন-ইন ফাংশন কল করা
authenticateUser(username, password);
}
}
}]
});
}
এখানে:
Ext.Button: একটি "Logout" বাটন তৈরি করা হয়েছে, যা ব্যবহারকারীকে লগআউট করতে দেয়।logoutUser(): এটি লগআউট ফাংশন, যা ব্যবহারকারীকে লগআউট করার পর সেশন মুছে ফেলে এবং লগইন ফর্মে ফিরে নিয়ে আসে।- UI Update: লগআউট হওয়ার পর UI এর ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়, এবং লগইন ফর্ম আবার রেন্ডার করা হয়।
৩. Session Management
ExtJS তে লগইন এবং লগআউট ব্যবস্থাপনা করতে হলে, সাধারণত session বা localStorage ব্যবহার করা হয়, যাতে ইউজার সেশন সংরক্ষিত থাকে। তবে, এখানে আমরা সিম্পল ফাংশন ব্যবহার করছি যা লগইন সেশনটি সিমুলেট করে।
Session Management উদাহরণ:
function authenticateUser(username, password) {
// সার্ভার সাইড অথেন্টিকেশন
if (username === 'admin' && password === 'password123') {
localStorage.setItem('loggedIn', true); // সেশন শুরু
alert('Login successful!');
// UI আপডেট
Ext.getBody().setStyle('background-color', '#e0f7fa');
} else {
alert('Invalid username or password.');
}
}
function logoutUser() {
localStorage.removeItem('loggedIn'); // সেশন বন্ধ
alert('You have logged out!');
Ext.getBody().setStyle('background-color', '#ffffff');
// লগইন ফর্ম পুনরায় রেন্ডার করা
Ext.create('Ext.form.Panel', {
title: 'Login Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false
}],
buttons: [{
text: 'Login',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
var values = form.getValues();
var username = values.username;
var password = values.password;
authenticateUser(username, password);
}
}
}]
});
}
এখানে:
localStorage.setItem(): লগইন সফল হলে সেশন শুরু করা হয়।localStorage.removeItem(): লগআউট হওয়ার পর সেশন বন্ধ করা হয়।- UI Update: লগইন এবং লগআউট হওয়ার পর UI আপডেট করা হয়।
সারাংশ
- Login Form: একটি লগইন ফর্ম তৈরি করা হয়েছে, যা ইউজারের ইউজারনেম এবং পাসওয়ার্ড চেক করে। সফল হলে, ব্যবহারকারী সিস্টেমে প্রবেশ করতে পারে।
- Logout System: লগআউট সিস্টেমটি ব্যবহারকারীর সেশন শেষ করে এবং তাদের লগইন ফর্মে ফিরিয়ে নিয়ে আসে।
- Session Management: সেশন ব্যবস্থাপনা করে ব্যবহারকারীর তথ্য সুরক্ষিত রাখে। এটি সাধারণত
localStorageবা সার্ভার সাইড সেশন ম্যানেজমেন্ট দিয়ে করা হয়।
ExtJS ব্যবহার করে লগইন এবং লগআউট সিস্টেম তৈরি করা সহজ এবং নিরাপদ, এবং এটি আরও কার্যকরী হয়ে ওঠে যখন আপনি session management এবং UI interaction কাস্টমাইজ করেন।
Read more
