Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Name: মুতাসিম বিল্লাহ (সুমন)

ব্যানার এইচটিএমএল ট্যাগ যুক্ত করবেন যেভাবে:

বর্তমান জগতটি প্রযুক্তির জগত। এখানে আপনি হাত বাড়ালেই পেয়ে যাবেন প্রযুক্তির সকল ধরনের উপাদান। আসলে প্রযুক্তি আমাদের যেভাবে সামনে এগিয়ে নিয়ে যাচ্ছে তাতে আগামী পৃথিবীর মানুষেরা কোন ধরনের প্রযুক্ত ব্যবহার করবে সেটা অনুধাবন করা বেশ কষ্টকর। বর্তমান পৃথিবীর কোন জিনিসটা আমাদের সবচেয়ে বেশী কাছে টেনে এনেছে জিজ্ঞাসা করলে ওয়েব সাইটের নাম সবার আগে আসে। ওয়েব ডেভেলপমেন্ট একটি মূল্যবান কাজ। যারা এই বিষয়ে নতুন কাজ করছেন ওয়েব সাইটে ব্যানার ট্যাগ তাদের কাছে একটি প্রয়োজনীয় শিক্ষা। আজকে আমি আপনাদের এই বিষয়ে বিস্তারিত ধারনা দিবো।
আমরা বিভিন্ন ওয়েব সাইটের উপরে, তলায়, ডানে বা বামে বিভিন্ন বিজ্ঞাপন দেখতে পায়, এই গুলো তৈরিতে আসলে ওয়েব সাইটে Banner HTML Tag ব্যবহার করে করা হয়। আপনিও ইচ্ছা করলে খুব সহজে আপনার ওয়েব সাইট বা ব্লগে HTML Tag ব্যবহার করে বিজ্ঞাপন বা ইমেজ ব্যবহার করতে পারেন।

এটি করতে হলে আপনাকে প্রাথমিক পর্যায়ে ফটোশপের মাধ্যমে আপনাকে একটি ব্যানার তৈরি করতে হবে। আপনি বিভিন্ন সাইজের ব্যানার তৈরি করতে পারেন। তবে ২০০×২০০, ৩০০×১৫০, ৬৮০×২৫০ ইত্যাদি সাইজের হলে ভাল হয়। আপনি ব্যানারটির ফাইল JPEG, PNG বা GIF হিসেবে সেভ করতে পারেন। আপনার ব্যানারটি তৈরি করা শেষ হলে এবার শুরু হবে আপনার আসল কাজ।

প্রথমে আপনি যে ব্যানারটি তৈরি করেছেন সেটি কোনও ফটো শেয়ার সাইটে আপলোড করুন, আপনি Picasa online ব্যবহার করতে পারেন। মনে রাখবেন আপনার ব্যানারটি যেন সঠিক মাপের হয়।

দ্বিতীয় স্তরে এসে আপনি লগ ইন করে আপনার ওয়েব প্রোভাইডারের ড্যাসবোর্ডে প্রবেশ করুণ এরপর ব্যানার স্থাপনের জন্য একটি গ্যাজেট ওপেন করুন। মনে রাখবেন গ্যাজেট নির্ধারণের জন্য আপনি অবশ্যই HTML/JAVA গ্যাজেট ব্যবহার করবেন। এবার নতুন ওপেন হওয়া বক্সে টাইপ করুন

<a href="http://www.********.com"><img src="http://**********.com/-.png" align="right"/></a>
এর মাধ্যমে আপনি HTML ট্যাগ তৈরি করলেন এবার প্রথম http থেকে মুছে আপনার ব্যানারটি যে ওয়েবের বিজ্ঞাপনের জন্য সেটির লিংক যুক্ত করুন। এবার দ্বিতীয় http থেকে মুছে আপনার ব্যানার ইমেজটি যেখানে আপলোড করেছিলেন সেই লিংকটি এখানে বসান। তাহলে আপনার ব্যানার বিজ্ঞাপনটি সক্রিয় হবে। এবার align=" এর পরে আপনার ব্যানারটি ওয়েবের কোন স্থান কেন্দ্র করে বসবে সেটি নির্বাচন করে দিতে পারেন, যথা: right, left, top, bottom। মনে রাখবেন আপনার ব্যানার লিংকটি অবশ্যই সঠিক হওয়া লাগবে নতুবা আপনি ইমেজ দেখতে পাবেন না।
আজ এ পর্যন্ত, আশাকরি এই টিউটোরিয়ালটা আপনাদের উপকারে আসবে। তাহলে এখনিই কাজটি করার চেষ্টা করুন।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি৫ : এ এক ফাইল এর মধ্যে অন্য ফাইল এর কোড ব্যবহার করা। (PHP 5 Include Files)

March 23, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

include ও require statement পিএইচপি প্রোগ্রামিং এর একটি গুরুত্বপূর্ণ অংশ যা ব্যবহার করে আপনি একটি ওয়েবসাইটে একাধিক পাতায় একই পিএইচপি, এইচটিএমএল, অথবা টেক্সট অন্তর্ভুক্ত করতে পারবেন যা আপনার পিএইচপি কোডিং কে সহজে ব্যাবহার যোগ্য এবং কোডিং এর আকার সংক্ষিপ্ত করে।

include file ব্যাবহারের মাধ্যমে ওয়েব পেইজ এর প্রতিটি পাতার জন্য একটি আদর্শ header, footer, এবং একটি মেন্যু ব্যাবহার করা যেতে পারে। যদি কখনও header অথবা footer অথবা মেন্যুতে জরুরি পরিবর্তন করতে হয় তাহলে শুধুমাত্র header অথবা footer অথবা মেন্যু অংশে পরিবর্তন আনলেই চলবে। এক্ষেত্রে পুরো পাতাই অন্য কোন পরিবর্তনের ঝামেলা নেই। উক্ত সুবিধার কারনেই পিএইচপি কোডিং এইচটিএমএল কোডিং থেকে নিরাপত্তা ও সহজে ব্যাবহারের দিক থেকে অনেক এগিয়ে।

মনে করি আমরা একটি footer ফাইল তৈরি করব যা আমাদের মূল ফাইলে অন্তরভুক্ত হবে। আমরা এই ফাইলটির নাম দিতে পারি “footer.php”

<?php
 echo "<p>Copyright &copy; 1999-" . date("Y") . 
       "http://bangla.salearningschool.com</p>";
 ?>

এখন উপরোক্ত footer.php ফাইলটি মূল পিএইচপি ফাইলে অন্তরভুক্ত করব।

<html>
 <body>

<h1>Welcome to my home page!</h1>
 <p>Lets Learn PHP.</p>
 <p>Some more text.</p>
 php include 'footer.php';?>

</body>
 </html>

আবার মনে করি আমরা একটি আদর্শ মেন্যু আমাদের মূল পিএইচপি ফাইলের সকল পেইজে ব্যবহার করব। সেক্ষেত্রে মেন্যু ফাইলটির নাম দেয়া হল "menu.php"

<?php
 echo '<a href="/default.asp">Home</a> -
 <a href="/html/default.asp">HTML Tutorial</a> -
 css/default.asp">CSS Tutorial -
 <a href="/js/default.asp">JavaScript Tutorial</a> -
 <a href="default.asp">PHP Tutorial</a>';
 ?>

এখন উপরোক্ত menu.php ফাইলটি মূল পিএইচপি ফাইলে অন্তরভুক্ত করব।

<html>
 <body>

<div class="menu">
 <?php include 'menu.php';?>
 </div>

<h1>Welcome to my home page!</h1>
 <p>Some text.</p>
 <p>Some more text.</p>

</body>
 </html>

include ও require এ দুটি statement এ যদি কোন ভুল থেকে থাকে তাহলে সাধারনত দু ধরনের error বার্তা প্রদর্শন করে থাকে।

include এর ক্ষেত্রে (E_COMPILE_ERROR) দেখাবে এবং স্ক্রিপ্ট বন্ধ হয়ে যাবে।
require এর ক্ষেত্রে (E_WARNING) দেখাবে কিন্তু স্ক্রিপ্ট বন্ধ না হয়ে চলমান থাকবে।

সুতরাং আপনি যদি include statement সংবলিত পিএইচপি কোডটি পরিচালনা করে এর ফলাফল প্রদর্শন করতে চান সেক্ষেত্রে include file ব্যাবহার অপরিহার্য। এতে যদি কোডিং এ কোন ভুল থাকে তাহলে তা (E_COMPILE_ERROR) দেখাবে। তবে জটিল পিএইচপি অ্যাপ্লিকেশন কোডিং ক্ষেত্রে require statement ই বেশী নিরাপদ এবং এটি উক্ত ফাইলের নিরাপত্তার জন্য নির্ভরযোগ্য।

এইচটিএমএল HTML

এইচটিএমএল কমেন্ট (HTML Comment)

March 23, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

রাজু (DU)

এইচ টি এম এল এ কমেন্ট করার জন্য কমেন্ট ট্যাগ  ব্যবহার করা হয়।

HTML Comment Tags এইচটিএমএল কমেন্ট ট্যাগ

HTML source এ আপনি নিম্নোক্ত syntax ব্যাবহার করে comments করতে পারেনঃ

নোটঃ এখানে অবশ্যই মনে রাখতে হবে যে একটি বিস্ময় সূচক চিহ্ন (!) শুরুর ট্যাগ এ ব্যাবহার করা হয়েছে। কিন্তু সমাপ্তি ট্যাগ হিসেবে কোন (!) ব্যবহার করা হয়নি।

Comments গুলি browser এ প্রদর্শিত হয় না কিন্তু তারা HTML document এ সাহায্য করে থাকে।

Comments দ্বারা আপনি আপনার HTML এ notifications and reminders ঠিক করে দিতে পারবেন।

উদাহরনঃ

<p>এখানে আপনার paragraph লিখুন .</p>

HTML debugging এর জন্য comment অসাধারন কাজ করে, কেননা আপনি HTML code line এর বাইরে comment করতে পারেন এবং কমেন্ট দেখে ত্রুটি খুজে বের করতে পারবেন।

উদাহরনঃ

<!-- Do not display this at the moment

-->

Conditional Comments (শর্তাধীন Comment)

HTML এ Conditional Comment ব্যাবহারে আপনি বাধার সম্মুখীন হতে পারেনঃ

<!--[if IE 8]>

.... some HTML here ....

endif]-->

March 23, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

AngularJS এর মাধ্যমে নিজের Directives তৈরি।
Md. Shahinoor Islamনিজের Directives তৈরি।
HTML উপাদান, মন্তব্য বা CSS classes দিয়ে Directives প্রদর্শন করতে পার। উদাহরনঃ

<my-directive></my-directive>
<input my-directive>
<!– directive: my-directive–>
<input>

একটি Directive এর ধারনা
angular.module(‘app’, []).directive(‘myDir’, function() {
return myDirectiveDefinition;
});

একটি Button Directive লেখা
escribe(‘button directive’, function () {
var $compile, $rootScope;
beforeEach(module(‘directives.button’));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it(‘adds a “btn” class to the button element’, function() {
var element = $compile(‘<button></button>’)($rootScope);
expect(element.hasClass(‘btn’)).toBe(true);
});
});
});

button directive ব্যবহার
<button type=”submit”
>Click Me!</button>

একটি Custom Validation Directives প্রবর্তন
একটি Custom Validation directive প্রবর্তন

এই জায়গায় আমাদের একটা test আছে, সুতরাং আমরা directive এর কার্যকারিতা বাস্তবায়ন করতে পারিঃ

myModule.directive(‘validateEquals’, function() {
return {
require: ‘ngModel’,
link: function(scope, elm, attrs, ngModelCtrl) {
function validateEqual(myValue) {
var valid= (myValue === scope.$eval(attrs.validateEquals));
ngModelCtrl.$setValidity(‘equal’, valid);
return valid ? myValue : undefined;
}
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.validateEquals, function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
});
}
};
});

AngularJS - 001

Angular স্থানীয়করণ (Localization) সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা। Localization Support in Angular : Writing International Applications in AngularJS

March 23, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

URL of translated tutorial
http://sitestree.com/841/

Paste written translation here
Angular স্থানীয়করণ সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা।
Md. Shahinoor IslamAngular স্থানীয়করণ সমর্থন: AngularJS আন্তর্জাতিক অ্যাপ্লিকেশনের লেখা।
AngularJS লাইব্রেরি অধীনে en-US লোকেল সম্পর্কিত তথ্য রাখা হয় যেখানে একটি ফোল্ডার i18n আছে। আপনি একটি ভিন্ন লোকেল ব্যবহার করতে চান তাহলে নিম্নরূপ আপনি এটি করতে পারেন। Fr_ca লোকেলর জন্য সমর্থন lib/angular/angular-locale_fr-ca.js সঙ্গে স্ক্রিপ্ট ট্যাগ লক্ষ্য করুন। নীচে যেভাবে দেয়া আছে JS ফাইল সে ভাবে হতে হবে।
angular.module(‘locale’, [‘ngLocale’]) : module definition with a dependency on the ngLocale
angular.module (‘locale’, [‘ngLocale’]) : ngLocale মডিউলের উপর মডিউলের সংজ্ঞা নির্ভর করে।
<!doctype html>
<html ng-app=”locale”>
<head>
<meta charset=”utf-8″>
<script src=”lib/angular/angular.js”></script>
<script src=”lib/angular/angular-locale_fr-ca.js”></script>
<script src=”locale.js”></script>
</head>
<body ng-controller=”LocaleCtrl”>
…
</body>
—

সম্পর্কিত উদাহরণ:
{{now | date:’fullDate’}}সেট হিসাবে সম্পূর্ণ তারিখ ফিরে আসবে লোকেলর উপর ভিত্তি করে
{{100 | currency:’€’}}
{{1000.5 | number}}
অনুবাদ হ্যান্ডলিং: টেক্সট বিভিন্ন ভাষার জন্য অনুবাদ করতে হবে।

প্রাথমিক ধারণা হচ্ছে, বিভিন্ন লোকেইলের জন্য key value pairs সহ আপনার JSON structure থাকতে হবে।আপনি ইউজার লোকেল দিয়ে যেখানে অনুবাদ করতে চাচ্ছেন সেখানে কী গুলো ব্যবহার করুন।

উদাহরনঃ
{
‘crud.user.remove.success': ‘A user was removed successfully.’,
‘crud.user.remove.error': ‘There was a problem removing a user.’
. . .
}
In your HTML, you can write something like below
<span>Hello, !</span>
to
<span>{{‘greetings.hello’ | i18n}}, !</span>

greetings.hello key সহ লোকেলের জন্য আপনার প্রয়োজনীয় JSON আপনি বুঝতে পেরেছেন।

AngularJS - 001

MVVM: মডেল : Angular JS

March 23, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

URL of translated tutorial
http://sitestree.com/mvvm-model-view-viewmodel/
Paste written translation here
MVVM: মডেল দেখুন ViewModel
অনুবাদক শেখ সোয়াইব

MVVM: এই ধরনের Angular.JS এবং Knockout.js হিসেবে
http://en.wikipedia.org/wiki/Model_View_ViewModel
KnockOut.js
http://en.wikipedia.org/wiki/Knockout.js
মার্টিন ফাওলার দ্বারা উপস্থাপনা মডেল
http://martinfowler.com/eaaDev/PresentationModel.html (theory behind: MVVM)

AngularJS - 001

Angular.JS বিষয় : সম্পর্কিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্টাফ . Angular.JS resources : Related JavaScript framework Stuff

March 23, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Angular.JS বিষয় : সম্পর্কিত জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক স্টাফ

Source: http://sitestree.com/angular-js-resources-related-javascript-framework-stuff/ (by Sayed Ahmed)
By শেখ সোয়াইব

কেন Angular? এবং কেন Angular না
http://www.sitepoint.com/10-reasons-use-angularjs/
কেন এই Angular.js Rock?
http://angular-tips.com/blog/2013/08/why-does-angular-dot-js-rock/
অনুচ্ছেদ এবং ই এস পি বিভাগের সম্পুর্ন পড়ুন : কেন Augular নয়?কেন নয় BackBone ,কেন নয় Ember । এ সম্প্রর্কিত বিষয় পড়তে এখানে ক্লিক করুন । https://moot.it/blog/technology/frameworkless-javascript.html

এই অনুচ্ছেদটি ও গুরুত্বপুর্ন : http://angular-tips.com/blog/archives/
স্লপ সাইজের ওয়েব ডেভল্ভমেন্ট ট্রেনিং এর সাথে Angular : https://egghead.io/
ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্ট এর সাথে Angular নিয়ন্ত্রণ : http://www.packtpub.com/angularjs-web-application-development/book
CRUD অ্যাপ্লিকেশন Angular ডেমো : https://github.com/angular-app/angular-app
Angular.JS উইকিপিডিয়া : https://github.com/angular/angular.js/wiki

এইচটিএমএল HTML

এইচটিএমএল কম্পিউটার কোডের উপাদান (HTML Computer Code Elements)

March 22, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML Computer Code Elements

AbuJubair Mahin

Computer Code

var person = {
     firstName:"John",
     lastName:"Doe",
     age:50,
     eyeColor:"blue"
}

এইচটি এম এল কম্পিউটার কোডের উপাদান (HTML Computer Code Elements)

সাধারণত, এইচটিএমএল পরিবর্তনশীল letter size, এবং পরিবর্তনশীল letter spacing ব্যবহার করে।

কম্পিউটার কোড এর উদাহরণ প্রদর্শনের সময় এটি ঘটা আশানুরূপ নয় ।

সকল <kbd>, <samp>, and <code> উপাদানগুলো স্থায়ী letter size এবং spacing সাপোর্ট করে ।

HTML Keyboard Formatting

এইচটিএমএল <kbd> উপাদান কীবোর্ড ইনপুট কে সংজ্ঞায়িত করে:

উদাহরনঃ

<p>To open a file, select:</p>

ফলাফলঃ

To open a file, select:

File | Open...

HTML Sample Formatting

এইচটিএমএল <samp> উপাদান কম্পিউটার আউটপুট কে সংজ্ঞায়িত করে:

উদাহরনঃ

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

ফলাফলঃ

demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

HTML Code Formatting

এইচটিএমএল <code> উপাদান প্রোগ্রামিং কোড কে সংজ্ঞায়িত করে:

উদাহরনঃ

<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
</code>

ফলাফলঃ

var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

<code> উপাদান অতিরিক্ত হোয়াইটস্পেস এবং লাইন ব্রেক সংরক্ষণ করে না:

উদাহরনঃ

<p>Coding Example:</p>

<code>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</code>

ফলাফলঃ

Coding Example:

var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }

এই সমস্যা সমাধানের জন্য, কোডগুলোকে <pre> এলিমেন্টে এর ভিতরে রাখতে হবে:

উদাহরনঃ

<p>Coding Example:</p>

<code>
<pre>
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}
</pre>
</code>

ফলাফলঃ

Coding Example:

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
}

HTML Variable Formatting

এইচটিএমএল <var> উপাদান গাণিতিক ভেরিয়েবলকে সংজ্ঞায়িত করে:

উদাহরনঃ

<p>Einstein wrote:</p>

ফলাফলঃ

Einstein wrote:

E = m c²

এইচটিএমএল Computer Code এলিমেন্টস

Tag	বিবরণ
<code>	প্রোগ্রামিং কোড কে সংজ্ঞায়িত করে
<kbd>	কীবোর্ড ইনপুট কে সংজ্ঞায়িত করে
<samp>	কম্পিউটার আউটপুট কে সংজ্ঞায়িত করে
<var>	গাণিতিক ভেরিয়েবল কে সংজ্ঞায়িত করে
<pre>	পূর্ববিন্যাসিত টেক্সট কে সংজ্ঞায়িত করে

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি ৫ টিউটোরিয়াল (PHP 5 Tutorial in Bangla)

March 22, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

নাম-শরিফুল ইসলাম
Job category-Php Coder

সাধারনত পিএইচপি একটি server site scripting language. Php ব্যবহার করে ওয়েব পেজ কে অতি আধুনিক এবং ডাইনামিক করে তলা যায়।

কোন লেখা কে আমরা পিএইচপি এর মাধ্যমে দেখাতে চাইলে echo বা print”” ব্যবহার করতে পারি। যেমন-

<!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>

</body>
</html>

নোটপ্যাড ওপেন করে এই example টুকু টাইপ করে ফাইল টি সেভ করুন .php extension দিয়ে। তা না হলে এটি পিএইচপি ফাইল হিসেবে চলবে না। আরও একটি বিষয় পিএইচপি ফাইল রান করার জন্য নির্দিষ্ট ভাবে একটি সারভার লাগবে তা না হলে কখনই এই পিএইচপি চলবে না। এইজন্য আপনি xampp server ইন্সটল করে নিতে পারেন। xampp ইন্সটল করার পর c > XAMPP >htdocs এর ভিতরে একটি ফোল্ডার ওপেন করুন আপনি যেকোনো নাম দিতে পারেন। মনে করুন আপনি নাম দিলেন test এবং আপনার ফাইল টি এই test ফোল্ডার এর ভিতর রাখুন। পিএইচপি এর ফাইল এর নাম যেকোনো রাখতে পারেন। ব্রাউজার ওপেন করে এড্রেস বারে লিখুন localhost/test/[পিএইচপি ফাইল এর নাম.php].go বাটন এ ক্লিক করলে দেখুন আপনি পিএইচপি তে লেখা ব্রাউজার এ দেখতে পারবেন।

সার্চ ইঞ্জিন অপটিমাইজেশন

SEO হল Search Engine Optimization। SEO Details

March 22, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Md. Monwarul Islam
E-mail: mmonwarul@yahoo.com

SEO হল Search Engine Optimization। এর মাধ্যমে একটি ওয়েবসাইট বা ওয়েবপেজকে সার্চ ইঞ্জিন ব্যবহারকারীদের সার্চ বা অনুসন্ধান ফলাফলের তালিকায় প্রথম দিকে দেখানোর চেষ্টা করা হয়। ইহা কোন একক কাজ নয়। ইহা অনেক গুলো কাজের সম্মিলিত ফল। সাধারণত একটি সার্চ ইঞ্জিনের ওয়েব ক্রাউলার বিভিন্ন সময় কিংবা কোনো নির্দিষ্ট সময় ওয়েবে থাকা বিভিন্ন ওয়েবসাইট ঘুরে বেড়ায়। তখন ওয়েব ক্রাউলার কিছু নির্দিষ্ট বৈশিষ্ট্য খুঁজে বেড়ায়। সাধারণত রবোট একটি ওয়েবসাইট ক্রাউল করার সময় যে বিষয়গুলোতে দৃষ্টিপাত করে, সেগুলো হলো:
ওয়েবসাইটের টাইটেল বা নাম, ওয়েবসাইটের ডেসক্রিপশন বা বিবরণ, ওয়েবসাইটের মেটা ট্যাগ, ওয়েবসাইটের সাইট ম্যাপ, ওয়েবসাইটে ব্যবহৃত ছবিগুলোর টাইটেল বা নাম, ওয়েবসাইটে ব্যবহৃত ছবিগুলোর অল্ট বিবরণ, ওয়েবসাইটে ব্যবহৃত ছবিগুলোর ক্যাপশন ইত্যাদিseo এর মাধ্যমে যে কোন ওয়েবসাইটকে সার্চ ইঞ্জিন এর প্রথমে পাতায় আনতে পারলে, ভিজিটর পাওয়ার সম্ভাবনাও অনেকাংশে বেড়ে যায়।
Internet থেকে যদি আমরা একটি বই ডাউনলোড করতে চাই, তাহলে আমরা সাধারণত যে কাজটি করি তা হল google এ আমরা ঐ বই এর নামটি লিখে search করি। এখন লক্ষ্য করুন আমরা search button press করার পর google কিছু website এর নাম দেখায় যেখানে আমরা ঐ বইটি পেতে পারি। এভাবে google প্রতি page এ ১০টি ওয়েরসাইটএর নাম দেখায়। এখন আপনার মনে প্রশ্ন জাগতেই পারে কেন কিছু সাইট প্রথম পেজে আসলো, আর কেনইবা বাকি ওয়েবসাইটগুলো পেছনের পেজে গেলো - google কি ইচ্ছা মত করছে নাকি এর পেছনে অন্য কোন কারণ আছে? নিশ্চয় প্রথমপেজের সাইটগুলোর মধ্যে বিশেষ কিছু আছে, যা অন্য সাইটগুলাতে নাই। এই বিশেষ কিছুই হল seo এর কৌশল, যার মাধ্যমে আপনিও আপনার ওয়েবসাইটটিকে প্রথম পেজে নিতে পারেন। আর প্রথম পেজ মানেই বেশি বেশি ভিজিটর।

seo কে সাধারণত ২ভাগে ভাগ করা হয়:
• On Page Seo এবং
• Off page seo.

একটি ক্রিকেট বিষয়ক সাইট আছে যা বর্তমানে #১০ এ অবস্থান করছে। আপনি চাচ্ছেন কেউ যদি search engine এ " Cricket" লিখে search করে তাহলে এটি #১ অবস্থানে দেখাবে - এটা করতে হলে ঐ সাইট এর seo করতে হবে। seo সাধারণত কোন popular search term বা keyword ব্যবহার করে করা হয়। যদি seo করে আপনার Brand name কে উপরের দিকে নিতে চান এবং সফলও হন, তাহলেও এটিকে ঠিক seo বলা যায় না। কারণ search engine যথেষ্ট smart এবং seo আপনার company name ও keyword কে খুব সহজেই আলাদা করতে পারে। আর প্রধান ব্যাপার হল, যে keyword এর জন্য যত প্রতিযোগীতা, সেই keywordএ rank করা তত কঠিন।

সার্চ ইঞ্জিন অপটিমাইজেশন

সার্চ ইঞ্জিন অপটিমাইজেশন এর উপর প্রাথমিক ধারণা ।

March 22, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Rasheda Yeasmin Nipa, and Sayed Ahmed

সার্চ ইঞ্জিন অপটিমাইজেশন এর সংক্ষিপ্ত রূপ হল এস ই ও। এসইও এর কিছু মূলনীতি রয়েছে- যার প্রথমেই আসে, ওয়েবপেজটি কি ধরনের হবে? ওয়েবসাইটের প্রতি পেজের অবশ্যই একটি টাইটেল দিতে হবে এবং প্রতিটি টাইটেল এর মধ্যে ভিন্নতা থাকতে হবে। তবে এর মূল শব্দগুলো (keyword) সম্পর্কে সচেতন থাকতে হবে, শব্দগুলো যেন ভিজিটরদের কাছে অর্থবহ হয়। দ্বিতীয়ত, পেজ এর কন্টেন্ট সম্পর্কেও সচেতন থাকতে হবে, নিম্ন মান সম্পন্ন কন্টেন্ট যেমন ব্যবহার করা যাবে না তেমনি নকল কোন কন্টেন্টও ব্যবহার করা উচিত হবে না। এমন ধরনের কন্টেন্ট ব্যবহার করতে হবে যার মাঝে বৈচিত্র্যতা আছে, তবে তা যেন ভিজিটরদের বিরক্তির কারন না হয়ে আকৃষ্ট করতে পারে। তৃতীয়ত,অ্যাংকর (a tag) টেক্সট ব্যবহারে হতে হবে সচেতন। অর্থবহ এবং বর্ণনামূলক অ্যাংকর টেক্সট ব্যবহার করতে হবে। একই অ্যাংকর টেক্সট বার বার ব্যবহার করা যাবে না। চতুর্থত, h1থেকে h6 ট্যাগ এর ব্যবহার এমন হতে হবে যা ওয়েবপেজের কন্টেন্ট স্ট্রাকচার তুলে ধরতে পারে। এছাড়া robots.txt ফাইল ব্যবহার করতে হবে যাতে করে ক্রলার ওয়েবসাইটের নির্দিষ্ট কোন অংশকে ইন্ডেক্সিং করা থেকে বিরত থাকে।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পি এইচ পি ৫ ইন্সটলেশন (PHP 5 Installation)

March 21, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

PHP 5 ইনস্টলেশন

প্রতাপ চন্দ্র

PHP শিখতে গেলে আপনার নিজের পিসিতে কিংবা ওয়েব সার্ভারে এই সফটওয়্যারটি প্রয়োজন। তাই ইনস্টলেশনটা আগে শিখতে হবে।

PHP ইনস্টল করতে আমরা যেসব ব্যবস্থা নিতে পারি:

PHP এবং MySQL সাপোর্ট করে এমন একটি ওয়েব হোস্টিং খুজে বের করা। কিংবা,
আপনার নিজের কম্পিউটারে ওয়েব সার্ভার ইনস্টল করা এবং তারপর PHP এবং MySQL ইনস্টল করা।

আপনার ওয়েব সার্ভারে যদি আগে থেকেই PHP সাপোর্ট বিদ্যমান থাকে, তবে নতুন করে কিছু করতে হবে না। পিএইচপি এক্সটেনশনযুক্ত একটি ফাইল (*.php) তৈরী করুন এবং তা সার্ভারে আপলোড করুন। তাহলে সার্ভার এই ফাইল আপনার কাজের জন্য প্রস্তুত করে দিবে। আপনার অতিরিক্ত কোনো টুলস ইনস্টল করার প্রয়োজন হবে না। পিএইচপি একটি ফ্রি সফটওয়্যার এবং বেশিরভাগ ওয়েব হোস্টিং এটি সাপোর্ট করে।

নিজের পিসিতে PHP ইনস্টল

যদি আপনার ওয়েব সার্ভার পিএইচপি সাপোর্ট না করে তবে পিএইচপি শিখতে গেলে আপনাকে অবশ্যই নিজের পিসিতে এটি ইনস্টল করে নিতে হবে।
ধারাবাহিকভাবে আপনাকে যা করতে হবে:

নিজের পিসিতে একটি ওয়েব সার্ভার ইনস্টল করুন,
PHP ইনস্টল করুন,
MySQL বা অন্য কোনো ডাটাবেজ ইনস্টল করুন।

পিএইচপি’র অফিসিয়াল ওয়েবসাইটে এটি ইনস্টল করার বিস্তারিত নির্দেশনা দেয়া আছে। সাইটের লিংক ব্রাউজ করতে ক্লিক করুন –
http://php.net/manual/en/install.php

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

C – Command Line Arguments (কমান্ড লাইন আর্গুমেন্ট)

March 21, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

C - Command Line Arguments

মোঃ আব্দুল্লাহ

একটি সি প্রোগ্রাম রান করার সময় কমান্ড লাইন থেকে কিছু ভেল্যু বা মান পাস করা সম্ভব । এই ভেল্যু বা মান গুলোকে কমান্ড লাইন আর্গুমেন্ট বলা হয় । অনেক সময় এই কমান্ড লাইন আর্গুমেন্ট অনেক গুরুত্বপূর্ণ এবং প্রয়োজনীয় হয়ে উঠে কারন এই কমান্ড লাইন আর্গুমেন্ট দিয়ে একটি সি প্রোগ্রামকে বাহির থেকে নিয়ন্ত্রণ করা যায় যা কিনা প্রোগ্রামের ভিতরের হার্ড কোডেড ভেল্যু বা মান তুলনায় বেশী কার্যকরী।
কমান্ড লাইন আর্গুমেন্ট এর আর্গুমেন্ট গুলি main( int argc, char *argv[]) ফাংশন এর আর্গুমেন্ট হিসেবে ব্যবহৃত হয়ে থাকে, যেখানে argc উল্লেখ করে কতগুলি আর্গুমেন্ট পাঠানো হয়েছে এবং argv[] হল pointer array যা কিনা যেই আর্গুমেন্ট গুলি পাঠানো হয়েছে তার দিকে point করে থাকে । নিম্নে একটি সহজ উদাহরণ তুলে ধরা হল যার দ্বারা পরীক্ষা করা যাবে যে প্রোগ্রামে কোন আর্গুমেন্ট পাঠানো হয়েছে কিনা এবং যদি পাঠানো হয়ে থাকে তাহলে ঐ অনুযায়ী কাজ করাঃ

#include <stdio.h>

int main( int argc, char *argv[] )
{
printf("Program name %s\n", argv[0]);

if( argc == 2 )
{
printf("The argument supplied is %s\n", argv[1]);
}
else if( argc > 2 )
{
printf("Too many arguments supplied.\n");
}
else
{
printf("One argument expected.\n");
}
}

উপরের প্রোগ্রামটি কম্পাইল করে যখন একটি কমান্ড লাইন আর্গুমেন্ট দিয়ে যখন রান করা হবে, তখন নিম্নোক্ত আউটপুট দেখাবেঃ
$./a.out testing
The argument supplied is testing

যখন দুইটি কমান্ড লাইন আর্গুমেন্ট দিয়ে যখন রান করা হবে, তখন নিম্নোক্ত আউটপুট দেখাবেঃ
$./a.out testing1 testing2
Too many arguments supplied.

যখন কোন আর্গুমেন্ট না দিয়ে যখন রান করা হবে, তখন নিম্নোক্ত আউটপুট দেখাবেঃ
$./a.out
One argument expected

এইখানে উল্লেখ্য যে, argv[0] তে যেই প্রোগ্রামটি কম্পাইল করে রান করা হবে তার নাম সংরক্ষিত হয়ে থাকবে এবং argv[1] হল pointer যা কিনা প্রথম আর্গুমেন্টকে point করে থাকবে এবং *argv[n] সর্বশেষ আর্গুমেন্টকে point করে থাকবে । যদি কোন আর্গুমেন্ট না পাঠানো হয় তাহলে argc এর মান হবে ১ এবং যদি একটি আর্গুমেন্ট হয় তাহলে argc এর মান হবে ২ ।
কমান্ড লাইন আর্গুমেন্ট এর প্রত্যেকটি আর্গুমেন্ট একটি স্পেস দিয়ে আলাদা করে পাঠানো হয়ে থাকে অথবা যদি কোন আর্গুমেন্টেই স্পেস থাকে তাহলে ডাবল কোটেশন ("") বা সিংগেল কোটেশন ('') দিয়ে পাঠাতে হয় ।
নিম্নের প্রোগ্রামটির মাধ্যমে আমরা প্রোগ্রামটির নাম এবং স্পেসসহ কোন আর্গুমেন্ট যদি দিতে চাই তা কিভাবে দিবো তা দেখবঃ
#include <stdio.h>

int main( int argc, char *argv[] )
{
printf("Program name %s\n", argv[0]);

if( argc == 2 )
{
printf("The argument supplied is %s\n", argv[1]);
}
else if( argc > 2 )
{
printf("Too many arguments supplied.\n");
}
else
{
printf("One argument expected.\n");
}
}

উপরের প্রোগ্রামটি কম্পাইল করে যখন একটি কমান্ড লাইন আর্গুমেন্ট দিয়ে যখন রান করা হবে, তখন নিম্নোক্ত আউটপুট দেখাবেঃ
$./a.out "testing1 testing2"

Progranm name ./a.out
The argument supplied is testing1 testing2

উল্লেখ যে, এইখানে একটি আর্গুমেন্টই স্পেসসহ পাঠানো হয়েছে ।

JavaScript

জাভাস্ক্রিপ্ট রেগুলার এক্সপ্রেশন (JavaScript Regular Expressions in Bangla)

March 21, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

দীপঙ্কর সাহা

আজকে আপনাদের মাঝে একটি বিষয় শেয়ার করার জন্য হাজির হলাম।তা হল কিভাবে Java Script Regular Expressions korte hoi. একটি রেগুলার এক্সপ্রেশন হল একটি অনুসন্ধান প্যাটার্ন যেটা টেক্সট এবং টেক্সট অপারেশন প্রতিস্তাপনের জন্য ব্যাবহার করা হয় বা ব্যাবহার করা যেতে পারে। এই রেগুলার এক্সপ্রেশন হল একটি অক্ষর বা একটি জটিল প্যাটার্ন ও হতে পারে। এই রেগুলার এক্সপ্রেশনটা টেক্সট অনুসন্ধানের সব ধরনের সঞ্চালন এবং টেক্সট অপারেশন প্রতিস্থাপনে ব্যাবহার করা যেতে পারে।

Syntax

Var patt = /bangle.SalearningSchool/ i

এই উধাহরনের বিষয় টা ব্যাখ্যা হল /bangle.SalearningSchool/ i একটি রেগুলার এক্সপ্রেশন

bangle.SalearningSchool হল একটি অনুসন্ধান প্যাটার্ন যা অনিসন্ধান বক্স এ ব্যাবহার করা যেতে পারে।আর I হল একটি পরিবর্তক বা অনুসন্ধান বক্স হতে পরিবর্তন হয়।

স্ট্রিং মেথড এর ব্যবহার

জাভাস্ক্রিপ্ট, রেগুলার এক্সপ্রেশন এ প্রায়ই দুই স্ট্রিং পদ্ধতি ব্যবহার করা হয়। তা হল search() এবং replace()।

সার্চ মেথড বা পদ্ধতি এমন একটি ম্যাচ অনুসন্ধান করার জন্য একটি অভিব্যক্তি ব্যবহার করে, এবং ম্যাচ অবস্থান প্রদান করে.

রিপ্লেস মেথড বা পদ্ধতি এমন যা প্যাটার্ন প্রতিস্থাপিত হয় যেখানে একটি পরিবর্তিত স্ট্রিং প্রদান করে।

রেগুলার এক্সপ্রেশন এর সাথে search() স্ট্রিং এর ব্যবহার

এখানে অনুসন্ধান পদ্ধতি সার্চ যুক্তি হিসাবে একটি স্ট্রিং গ্রহণ করতে হবে. স্ট্রিং যুক্তি একটি রেগুলার এক্সপ্রেশন রূপান্তরিত করা হবে। উদাহরন সরুপ

একটি স্ট্রিং সার্চ এর ব্যাবহার নিচে দেখানো হলঃ

var str = "Visit W3Schools";
var n = str.search(/bangle.SalearningSchool/i);

রেগুলার এক্সপ্রেশন এর সাথে পরিবর্তন বা replace() স্ট্রিং এর ব্যবহার

উদাহরন সরুপ একটি স্ট্রিং রিপ্লেস এর ব্যাবহার নিচে দেখানো হলঃ

var str = "Visit Microsoft!";
 var res = str.replace(/bangle.SalearningSchool/i, "bangle.SalearningSchool");

রেগুলার এক্সপ্রেশন মোডিফায়ারস

মোডিফায়ারস	বর্ণনা
i	এটা অসংবেদি বা ইনসেনসিটিভ সঞ্চালন করতে বেবহারিত হয়।
g	একটি আন্তর্জাতিক ম্যাচ সঞ্চালন করতে ব্যবহৃত হয়
m	একাধিক সঞ্চালন করতে ব্যবহৃত হয়

রেগুলার এক্সপ্রেশন প্যাটার্নস

এক্সপ্রেসন্স	বর্ণনা
[abc]	বন্ধনীর মধ্যে অক্ষর কোন খুঁজুন
[0-9]	বন্ধনীর মধ্যে সংখ্যার কোন খুঁজুন
(x/y)	পৃথক বিকল্প কোনো খুঁজুন

Metacharacters একটি বিশেষ অর্থ দিয়ে অক্ষর

Metacharacters	বর্ণনা
/d	একটি সংখ্যা খুজা হয়
/s	একটি হোয়াইটস্পেস অক্ষর খুঁজুন
/b	শুরুতে বা একটি শব্দের শেষে একটি মিল খুঁজুন
/uxxxx	হেক্সাডেসিমেল সংখ্যা xxxx দ্বারা নির্দিষ্ট ইউনিকোড অক্ষর খুঁজুন

Quantifiers define quantities

Quantifiers	বর্ণনা
n+	অন্তত এক এন রয়েছে যে কোনো স্ট্রিং ম্যাচ
n*	এন শূন্য বা তার বেশি দৃষ্টিগোচর রয়েছে যে কোনো স্ট্রিং ম্যাচ
n?	এন শূন্য বা একটি ঘটনার মধ্যে রয়েছে যে যেকোনো স্ট্রিং ম্যাচ

JavaScript

JavaScript typeof, null, and undefined. জাভাস্ক্রিপ্ট টাইপঅফ, নাল এবং আনডিফাইন্ড

March 21, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাভাস্ক্রিপ্ট টাইপঅফ, নাল এবং আনডিফাইন্ড

জাভাস্ক্রিপ্ট টাইপঅফ অপারেটর:
জাভাস্ক্রিপ্টে কোনো ডাটার টাইপ জানার জন্য টাইপঅফ অপারেটর ব্যবহার করা হয়।
উদাহরণ:
typeof "John" // Returns string
typeof 3.14 // Returns number
typeof false // Returns boolean
typeof [1,2,3,4] // Returns object
typeof {name:'John', age:34} // Returns object

নাল:
জাভাস্ক্রিপ্টে নাল মানে কিছুই নয়। এটা এমন কিছুকে বোঝায় যা এখন আর বিদ্যমান নেই।
জাভাস্ক্রিপ্টে নালকে একটি অবজেক্ট হিসেবে বিবেচনা করা হয়।
কোন ভেরিযবলকে নাল হিসেবে ডিক্লেয়ার করে খালি একটি অবজেক্ট তৈরী করা যায়।
var person = null; // Value is null, but type is still an object
একটি ভেরিযবলকে আনডিফাইন্ড হিসেবে ডিক্লেয়ার করেও খালি একটি অবজেক্ট তৈরী করা যায়।
var person = undefined; // Value is undefined, type is undefined

আনডিফাইন্ড:
জাভাস্ক্রিপ্টে আনডিফাইন্ড হলো একটি ভেরিযবল যার কোনো ভেলু নেই।
var person; // Value is undefined, type is undefined
একটি ভেরিযবলকে আনডিফাইন্ড ডিক্লেয়ার করার মাধ্যমেও ভেরিযবলের ভেলু খালি করা যায়।
person = undefined; // Value is undefined, type is undefined

আনডিফাইন্ড এবং নালের মধ্যে পার্থক্য:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true

JavaScript

জাভাস্ক্রিপ্ট সিনট্যাক্স (JavaScript Syntax)

March 21, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাভাস্ক্রিপ্ট সিনট্যাক্স

জাভাস্ক্রিপ্ট সিনট্যাক্স হলো কিছু নিয়মের সমষ্টি, এই প্রোগ্রাম কিভাবে কাজ করে সিনট্যাক্সের মাধ্যমে তাই নির্দেশ করা হয়।

জাভাস্ক্রিপ্ট প্রোগ্রাম

কম্পিউটার প্রোগ্রাম হলো কম্পিউটারের মাধ্যমে কোন কাজ সম্পাদন করার জন্য প্রয়োজনীয় নির্দেশসমূহের লিস্ট। প্রোগ্রামিং লেঙ্গুয়েজের এ সকল নির্দেশসমূহকে বলা হয় স্টেটমেন্ট।
জাভাস্ক্রিপ্টও একটি প্রোগ্রামিং লেঙ্গুয়েজ।
জাভাস্ক্রিপ্টের স্টেটমেন্টগুলোকে সেমিকোলন দ্বারা একটি থেকে অন্যটিকে আলাদা করা হয়।
উদাহরণ:
var x = 5;
var y = 6;
var z = x + y;

জাভাস্ক্রিপ্ট স্টেটমেন্টস

জাভাস্ক্রিপ্ট স্টেটমেন্টে নিম্নের বিষয়গুলো অন্তর্ভূক্ত রয়েছে।
ভেলু, অপারেটর, এক্সপ্রেসন, কীওয়ার্ড এবং কমেন্ট।

জাভাস্ক্রিপ্ট ভেলু

জাভাস্ক্রিপ্টে দুই ধরনের ভেলু রয়েছে: ফিক্সড ভেলু এবং ভেরিয়েবল ভেলু।
ফিক্সড ভেলুকে লিটারেল বলা হয় এবং ভেরিযবল ভেলুকে ভেরিয়েবল বলা হয়।

জাভাস্ক্রিপ্ট লিটারেলস

ফিক্সড ভেলু লেখার সবচেয়ে গুরুত্বপূর্ণ নিয়মটি হচ্ছে:
দশমিকসহ অথবা দশমিক ছাড়া শুধু নাম্বার লিখা।
10.50
1001
স্ট্রিংকে ডাবল কোটেশন অথবা সিঙ্গেল কোটেশনের মধ্যে লেখা।
"John Doe"
'John Doe'
এক্সপ্রেসনে শুধুমাত্র ফিক্সড ভেলু ব্যবহার করা।
5 + 6
5 * 10

জাভাস্ক্রিপ্ট ভেরিযবল

প্রোগ্রামিং লেঙ্গুয়েজে ডাটাকে স্টোর করার জন্য ভেরিযবল ব্যবহার করা হয়।
জাভাস্ক্রিপ্টে ভেরিযবলকে ডিফাইন করার জন্য var কীওয়ার্ড ব্যবহার করা হয়।
ভেরিযবলে ভেলু এসাইন করার জন্য সমান (=) চিহ্ন ব্যবহার করা হয়।
নিচের উদাহরণে x কে ভেরিযবল হিসেবে ডিফাইন করা হয়েছে এবং পরে x ভেরিযবলে ভেলু 6 এসাইন করা হয়েছে।
var x;
x = 6;

জাভাস্ক্রিপ্ট অপারেটর

কোনো ভেলুকে ভেরিযবলে এসাইন করার জন্য জাভাস্ক্রিপ্ট এসাইনমেন্ট অপারেটর ব্যবহার করে।
var x = 5;
var y = 6;
ভেলুর হিসাব করার জন্য জাভাস্ক্রিপ্ট এরেথমেটিক অপারেটর ব্যবহার করে।
(5 + 6) * 10

জাভাস্ক্রিপ্ট কীওয়ার্ডস

কি ধরনের কাজ সম্পাদন করতে হবে তা জাভাস্ক্রিপ্ট কীওয়ার্ডসের মাধ্যমে ডিফাইন করা হয়।
var কীওয়ার্ডের মাধ্যমে নতুন ভেরিযবল তৈরির নির্দেশনা দেয়া হয়।
var x = 5 + 6;
var y = x * 10

জাভাস্ক্রিপ্ট কমেন্টস

জাভাস্ক্রিপ্টের সকল স্টেটমেন্টই সম্পাদিত হয় না। // এর পরের কোড অথবা /* এবং */ এর ভেতরের কোডগুলো কমেন্ট হিসেবে নির্ধারিত হয়। যে কোনো কমেন্টকে বাতিল বলে গন্য করা হয় এবং তা সম্পাদিত হয় না।
var x = 5; // I will be executed
// var x = 6; I will NOT be executed

জাভাস্ক্রিপ্ট একটি কেস সেনসেটিভ লেঙ্গুয়েজ

জাভাস্ক্রিপ্টের সকল আইডেনটিফায়ার কেস সেনসেটিভ। lastName এবং lastname এই ভেরিযবল দুটি সম্পূর্ণ আলাদা।
lastName = "Doe";
lastname = "Peterson";
জাভাস্ক্রিপ্ট কখনোই কীওয়ার্ড var এর পরিবর্তে VAR অথবা Var কে গ্রহণ করবে না।

জাভাস্ক্রিপ্ট কারেক্টার সেট

জাভাস্ক্রিপ্ট ইউনিকোড কারেক্টার সেট ব্যবহার করে যার মধ্যে পৃথিবীর সকল কারেক্টার, পানচুয়েশন, সিম্বল রয়েছে।

JavaScript

জাভাস্ক্রিপ্ট ভেরিয়েবল (JavaScript Variables)

March 21, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাবাস্ক্রিপ্ট ভেরিয়েবল

মোঃ রফিকুল ইসলপাম

জাবাস্ক্রিপ্ট ভেরিইয়েবল হচ্ছে তথ্য্যের মান সংরক্ষণের জন্য একটি কনটেইনার ।

ভেরিয়েবলস কে নিচে x, y, z এর সাহায্যে উদাহরণ হিসাবে দেয়া হল ।

Var x = 5;

Var y = 6;

Var z = x+y;

উপরের উদাহরণে যাহা বুঝায় তা হলঃ-

X এর মান হচ্ছে 5

Y এর মান হচ্ছে 6

Z এর মান হচ্ছে 11

বীজগণিতের মত

নিচের উদাহরণে ভেরিয়েবল হচ্ছেঃ price1, price2 এবং total

Var price1 = 5;

Var price2 = 6;

Var total = price1+ price2;

প্রোগ্রামিংটা হচ্ছে প্রায় বীজগনিতের মত। আমরা ভেরিয়েবল ব্যবহার করি (যেমন price1 এর মত) মূল্য নির্ধারণের জন্য ।

প্রোগ্রামিংটা হচ্ছে প্রায় বীজগনিতের মত। আমরা এক্সপ্রেশনে ( যেমন total=price1+price2) এ ভেরিয়েবল ব্যবহার করি ।

জাভাস্ক্রিপ্ট শনাক্তকারী JavaScript Identifiers

সকল জাভস্ক্রিপ্ট ভেরিয়েবলকে অবশ্যিই অনন্য নাম দ্বারা চিহ্নিত করতে হবে।

এই অনন্য নামগুলোকে বলা হয় আইডেন্টিফায়ার (শনাক্তকারী)

আইডেন্টিফায়ার ছোট নাম দ্বারা (যেমন x এবং y) অথবা বিস্তারিতভাবে (যেমন age, sum, totalVolume) চিহ্নিত করা যেতে পারে।

ভেরিয়েবল এর নামের কাঠামোর সাধারণ নিয়ম হচ্ছে (অনন্য আইডেন্টিফায়ার):

নামে অক্ষর, সংখ্যা, আন্ডারস্কোর(_), এবং ডলার ($) এর চিহ্ন ব্যবহার করা যেতে পারে ।
নাম অবশ্যই অক্ষর দ্বারা শুরু করতে হবে।
নাম $ এবং _ চিহ্ন দ্বারাও শুরু করা যেতে পারে । (কিন্তু আমরা এই টিউটোরিয়াল এ এগুলো ব্যবহার করিনি।)
নাম কেস সংবেদনশীল (y এবং Y একই ভেরিয়েবল নয়)
সংরক্ষিত শব্দ (যেমন জাভাস্ক্রিপ্ট কীওয়ার্ড) নাম হিসাবে ব্যবহার করা যাবে না।

অ্যাসাইনমেন্ট অপারেটর

জাভাস্ক্রিপ্ট এ সমান চিহ্ন (=) হচ্ছে অ্যাসাইনমেন্ট অপারেটর, সমান সমান (equal to) অপারেটর নয়।

এটি বীজগণিতের নিয়ম মেনে চলে না। নিচের উদাহরণটি বীজগণিতে কোন অর্থ বহন করে না।

x = x + 5

জাভাস্ক্রিপ্টে এটি যথাযথ অর্থ বহন করে: এটি x এর মান x + 5 নির্ধারণ করে ।

(এটি x + 5 এর মান নির্ণয় করে এবং x এর স্থলে উক্ত মান বসায়। ফলে x এর মান 5 বৃদ্ধি পেয়েছে।)

নোট: “সমান সমান” (equal to) অপারেটর লেখার জন্য জাভাস্ক্রিপ্টে == ব্যবহার করা হয়।

জাভাস্ক্রিপ্ট ডেটা টাইপ

জাভাস্ক্রিপ্ট ভেরিয়েবল সংখ্যা যেমন 100 এবং টেক্সট যেমন "John Doe" ধারণ করতে পারে।

প্রোগ্রামিং এ টেক্সট এর মানকে টেক্সট স্ট্রিং বলা হয়।

জাভাস্ক্রিপ্ট অনেক ধরণের ডেটা পরিচালনা করতে পারে। কিন্তু এখনকার মত সংখ্যা এবং স্ট্রিং নিয়ে ভাবুন।

স্ট্রিং ডবল বা সিঙ্গেল কোটেশন এর ভিতরে লিখা হয়। সংখ্যা লিখতে কোন কোটেশন লাগে না।

যদি আপনি কোন সংখ্যার দুপাশে কোটেশন দেন তাহলে এটি স্ট্রিং হিসেবে বিবেচিত হবে।

উদাহরণ

var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';

জাভাস্ক্রিপ্ট ভেরিয়েবল ঘোষণা (তৈরি) করা

জাভাস্ক্রিপ্ট এ ভেরিয়েবল তৈরি করাকে বলা হয় ভেরিয়েবল ডিক্লেয়ার করা।

var কীওয়ার্ড এর সাহায্যে জাবাস্ক্রিপ্টে ভেরিয়েবল ডিক্লেয়ার করা যায়:

var carName;

ডিক্লিয়ারেশন করার পর ভেরিয়েবলটি খালি অবস্থায় থাকে (এর কোন মান নেই)
ভেরিয়েবল এর মান নির্ধারণের জন্য সমান চিহ্ন ব্যবহার করতে হয়:

carName = "Volvo";

আপনি ভেরিয়েবল ডিক্লেয়ার করার সময়ও মান নির্ধারণ করে দিতে পারেন:

var carName = "Volvo";

নিচের উদাহরণে আমরা একটি ভেরিয়েবল তৈরি করেছি এবং এর মান "Volvo" নির্ধারণ করে দিয়েছি।
এরপর id="demo" এর মাধ্যমে একটি এইচটিএমএল এর প্যারাগ্রাফের ভিতরে এর মান প্রদর্শন করেছি।

<p id="demo"></p>

<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

নোট: ভাল প্রোগ্রামিং অনুশীলন হলো সকল ভেরিয়েবল স্ক্রিপ্ট এর শুরুতে ডিক্লেয়ার করা।

একটি স্টেটমেন্ট, অনেকগুলো ভেরিয়েবল

আপনি একটি স্টেটমেন্ট এর মধ্যে অনেকগুলো ভেরিয়েবল ডিক্লেয়ার করতে পারেন।

স্টেটমেন্টটি var দিয়ে শুরু করুন এবং ভেরিয়েবলগুলো কমা দিয়ে পৃথক করুন:

var person = "John Doe", carName = "Volvo", price = 200;

ডিক্লেয়ারেশন একাধিক লাইনে ভেঙ্গেও লেখা যেতে পারে:

var person = "John Doe",
carName = "Volvo",
price = 200;

মান = অনির্দিষ্ট

কম্পিউটার প্রোগ্রাম এ প্রায়শই মান ছাড়াই ভেরিয়েবল ডিক্লেয়ার করা হয়। এই মান এমনকিছু যা নির্ণয় করে পাওয়া যাবে বা এমনকিছু যা পরবর্তীতে নির্ধারণ করে দেয়া হবে, যেমন ব্যবহারকারীর ইনপুট।

মান ব্যতীত কোন ভেরিয়েবল ডিক্লেয়ার করলে তা অনির্দিষ্ট (undefined) হিসেবে থাকে।

স্টেটমেন্টটি কার্যেপরিণত করার পর carName ভেরিয়েবলটির মান অনির্দিষ্ট অবস্থায় আছে:

var carName;

জাভাস্ক্রিপ্ট ভেরিয়েবল পূণ-ডিক্লেয়ার করা

যদি আপনি কোন ভেরিয়েবলকে পুণ-ডিক্লেয়ার করেন তাহলে এর মান অপরিবর্তিত অবস্থায় থোকে।
স্টেটমেন্টটি কার্যে পরিণত করার পরও carName ভেরিয়েবলটির মান এখনও "Volvo" ই আছে।
যেমন:

var carName = "Volvo";
var carName;

গাণিতিক জাভাস্ক্রিপ্ট

বীজগণিতিক নিয়ম অনুসারে জাভাস্ক্রিপ্ট ভেরিয়েবল দিয়ে = এবং + এর মতো অপারেটর দিয়ে গাণিতিক কাজগুলো করা যায়:

var x = 5 + 2 + 3;

আপনি স্ট্রিংও ব্যবহার করতে পারেন, কিন্তু সেগুলো শৃঙ্খলাবদ্ধ হতে হবে (added end-to-end)।

এইচটিএমএল HTML

এইচটিএমএল এর কোটেশন (HTML Quotation and Citation Elements)

March 21, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML Quotation and Citation Elements

শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467

এইচটিএমএল এর কোটেশন (HTML Quotation and Citation Elements)

এইচটিএমএল <q> সংক্ষিপ্ত উদ্ধৃতি এর জন্য

সংক্ষিপ্ত উদ্ধৃতি এর জন্য এর জন্য <q> এলিমেন্ট ব্যবহার করা হয়। ব্রাউজার নিজে নিজে এই উদ্ধৃতির চিহ্ন বসিয়ে দেয়।

উদাহরণঃ

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

ফলাফলঃ

WWF's goal is to: Build a future where people live in harmony with nature.

এইচটিএমএল <blockquote> বড় উদ্ধৃতি এর জন্য

বড় উদ্ধৃতর জন্য <blockquote> ব্যবহার করা হয়। ব্রাউজার সাধারণত <blockquote> এর ভিতরের অংশ প্রদর্শন করে।

উদাহরণ

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

ফলাফলঃ

Here is a quote from WWF's website:

For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.

সংক্ষিপ্ত রূপ প্রকাশের জন্য এইচটিএমএল <abbr> এর ব্যবহার

কোন কিছুর সংক্ষিপ্ত রূপ প্রকাশ করার জন্য এইচটিএমএল এর <abbr> ব্যবহার করা হয়। ব্রাউজারে উক্ত আন্ডার লাইন করা শব্দ/শব্দসমষ্টি এর উপর মাউস পয়েন্টার নিলে উক্ত শব্দ/শব্দসমষ্টিি এর সম্পর্কিত বিস্তারিত তথ্য প্রদান করে। ফলে এটি ব্রাউজার, অনুবাদ এবং search engine এর ক্ষেত্রে গুরুত্তপূর্ণ তথ্য দেয়।

উদাহরণ

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

ফলাফলঃ

The WHO was founded in 1948.

যোগাযোগ এর ঠিকানা প্রকাশে এইচটিএমএল <address>

কোন আর্টিকেল এর মালিক এর যোগাযোগ এর তথ্য দেওয়ার ক্ষেত্রে আমরা <address> ব্যবহার করব। সাধারনত এটি ইতালিক আকারে দেখায়। প্রায় প্রত্যেক ব্রাউজার কোন লেখার শুরুতে এবং শেষে লাইন ব্রেক যুক্ত করে

উদাহরণঃ

Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

ফলাফলঃ

Written by Jon Doe.Visit us at:Example.comBox 564, DisneylandUSA

কাজের শিরোনাম লেখার জন্য <cite>

কোন কাজের শিরোনাম দেওয়ার ক্ষেত্রে আমরা <cite> ব্যবহার করব। প্রায় প্রত্যেক ব্রাউজার সাধারনভাবে এটিকে ইতালিক এ প্রদর্শন করে।

উদাহরণ

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

ফলাফলঃ

The Scream by Edward Munch. Painted in 1893.

এইচটিএমএল <bdo>

দ্বি মুখী লেখার জন্য এই উপাদান ব্যবহার করা হয়। যদি এটি ব্রাউজার সাপোর্ট করে তাহলে লেখাকে ডান পাস থেকে বাম দিকে অল্টাভাবে প্রদর্শন করে।

উদাহরণঃ

<bdo dir="rtl">This text will be written from right to left</bdo>

ফলাফলঃ

This text will be written from right to left

এইচটিএমএল উদ্ধৃতি, তলব এবং ডেফিনিশন এলিমেন্ট এর নাম এবং তাদের বর্ণনা নিচে দেওয়া হলঃ

ট্যাগ	বর্ণনা
<abbr>	সংক্ষিপ্ত রূপ বুঝায়
<address>	কোন ডকুমেন্ট এর লেখকের যোগাযোগের ঠিকানা প্রকাশ করতে ব্যবহৃত হয়
<bdo>	টেক্সট এর অভিমুখ পরিবর্তন করার জন্য
<blockquote>	কটেশন মার্ক যুক্ত অংশ যা অন্য কোন উৎস থেকে এসেছে
<dfn>	কোন শব্দের সংজ্ঞা
<q>	সংক্ষিপ্ত ইনলাইন কোটেশন এর ক্ষেত্রে।
<cite>	কোন কাজের শিরোনাম।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পি এইচ পি ৫ সিন্ট্যাক্স (PHP 5 Syntax)

March 20, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

পিএইচপি হলো একটি প্রোগ্রামিং ল্যাগুয়েজ যা ওয়েব ডেভেলপমেন্ট এর জন্য বহুল ব্যবহৃত।

পিএইচপি কোড এর প্রতিটি অংশ < ?php চিহ্ন দিয়ে শুরু এবং ?> চিহ্ন দিয়ে শেষ হবে।
এবার আপনার কোড এডিটর (নোটপ্যাড/ড্রিময়েভার বা আপনি যা ব্যাবহার করেন) খুলুন এবং নিচের মত লিখুনঃ

< ?php
 // PHP code goes here
 ?>

পিএইচপি কোড কে কাজ করাতে অবশ্যই ফাইলটি সেভ করার সময় .php এক্সটেনশন দিয়ে সেভ করতে হবে। যদি .html থাকে তাহলে পিএইচপি কোড execute হবেনা।

এবার তাহলে ছোট একটা কোড লেখা যাক।

<!DOCTYPE html>
 <html>
 <body>
 
 <h1>My first PHP page</h1>
 
 <?php
 echo "Hello World!";
 ?>
 
 </body>
 </html>

উপরে লক্ষ্য করুন echo নামে একটা ফাংশন ব্যবহার করা হয়েছে যেটা দিয়ে php তে কোনো লেখা প্রদর্শন করানো হয়। তারপর লক্ষ্য করুন ";" সেমিকোলন চিহ্ন ব্যবহার করা হয়েছে। এটা দিয়ে পিএইচপি-তে কোনো লাইন শেষ বুঝনো হয়। অর্থাৎ কোনো লাইনের শেষে ; দিয়ে সেই লাইনের এক্সিকিউশন বন্ধ করা হয়। উদাহরণঃ " Hello World!"

PHP তে কমেন্ট

কোনো প্রোগ্রামিং লান্গুয়েজে যখন কমেন্ট বা মন্তব্য যোগ করা হয় তখন তা এক্সিকিউশন হয় না। কমেন্ট সাধারনত সাহায্যকারী হিসেবে ব্যবহৃত হয়। যাতে একটা কোড লেখা দেখে সহজে বুঝা যায় যে কোডটি কেন লেখা হয়েছে। পিএইচপি-তে সাধারনত তিন ধরনের কমেন্ট ব্যবহার করা হয়।

উদাহরণঃ

<!DOCTYPE html>
 <html>
 <body>
 
 <?php
 // This is a single-line comment
 
 # This is also a single-line comment
 
 /*
 This is a multiple-lines comment block
 that spans over multiple
 lines
 */
 
 // You can also use comments to leave out parts of a code line
 $x = 5 /* + 15 */ + 5;
 echo $x;
 ?>
 
 </body>
 </html>

single line comment - // এই চিহ্ন দ্বারা।
এখানে // এই চিহ্ন এর পরের This is single line comment এই লেখাটি ব্রাউজার প্রদর্শন করবে না। কারণ এইটা কমেন্ট এর মধ্যে লেখা

multi-line comment - /* */
এখানে # এর পরের লেখাগুলোও ব্রাউজার দেখাবে না। কারণ এটাও একটা কমেন্ট। এটাকে বলা হয় ইউনিক্সের শেল স্টাইল মন্তব্য। এই স্টাইলটা বেশি ব্যবহৃত হয় কোনো পিএইচপি কনফিগারেশন বা মান সম্পর্কিত মন্তব্য যোগ করতে।

এইচটিএমএল HTML

এইচটিএমএল এর টেক্সট ফরমেটিং (HTML Text Formatting Elements)

March 20, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML Text Formatting Elements

শরিফুল ইসলাম
Job category-Php Coder
Email-bappiislam1988@gmail.com
Mob-01722806467

এইচটিএমএল ফরম্যাটিং elements (HTML Formatting Element)

গত অধ্যায়ে আপনারা জেনেছেন, HTML Style Attribute দ্বারা কিভাবে HTML Style কে পরিবর্তন করা যায়।

এ অধ্যায়ে আমরা HTML Formatting Element সম্পর্কে জানব। নিম্নে HTML Text Formatting Elements গুলোকে উদাহরণসহ তুলে ধরা হল-

এইচটিএমএল এর কিছু গুরুত্তপূর্ণ উপাদান আছে যা দিয়ে টেক্সট কে বিভিন্নরুপে সাজানো যায়।

যেমন আমরা বোল্ড এবং ইতালিক টেক্সট পাওয়ার জন্য ব্যবহার করব <b> এবং <i>। ফরম্যাটিং উপাদান দ্বারা কি ধরনের টেক্সট হতে পারে তা নিচে দেওয়া হল

Bold text
Important text
Italic text
Emphasized text
Marked text
Small text
Deleted text
Inserted text
Subscripts
Superscripts

এইচটিএমএল Bold এবং strong ফরম্যাট এর উদাহরণ

<b> এলিমেন্ট Text কে বোল্ড করে, Text কে কোন বিশেষ গুরুত্ব প্রদান করে না।

উদাহরণঃ

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

</body>
</html>

ফলাফলঃ

This text is normal.

This text is bold.

এইচটিএমএল এর <strong> এলিমেন্ট strong টেক্সট ডিফাইন করে যা শব্দ বা বাক্যটিকে বিশেষ গুরুত্ব প্রদান করে।

উদাহরণঃ

<p><strong>This text is strong</strong>.</p>

ফলাফলঃ

This text is strong.

এইচটিএমএল italic এবং emphasized ফরম্যাট

এইচটিএমএল এ <i> উপাদান দিয়ে ইতালিক টেক্সট ডিসপ্লে করা হয় কোন অতিরিক্ত গুরুত্ত প্রদান করা ব্যতীত।

উদাহরণঃ

<p><i>This text is italic</i>.</p>

ফলাফলঃ

This text is italic.

গুরুত্ব সহকারে emphasized টেক্সট দেখানোর জন্য <em> উপাদান ব্যবহার করা হয়

উদাহরণঃ

<p><em>This text is emphasized</em>.</p>

ফলাফলঃ

This text is emphasized.

দ্রষ্টব্য: ব্রাউজার গুলো <strong> কে <b> এবং <em> কে <i> আকারে ডিসপ্লে করে
যদিও এই ট্যাগ গুলোর মধ্যে অর্থগত ভিন্নতা রয়েছেঃ এখানে <b> এবং <i> বোল্ড এবং ইতালিক টেক্সট বুঝায় কিন্ত <strong> এবং <em> ট্যাগ বুঝায় যে টেক্সগুলো গুরুত্বপূর্ণ।

এইচটিএমএল এর টেক্সট ফরম্যাটিং এর জন্য ট্যাগ গুলো নিচে পর্যায় ক্রমে দেখানো হলঃ

Tag	Description (বর্ণনা)
<b>	কোন text কে bold করতে এ tag ব্যবহার করা হয়।
<strong>	গুরুত্বপূর্ণ Text কে তুলে ধরতে এই tag ব্যবহৃত হয়।
<i>	কোন text কে italic করতে এই tag ব্যবহৃত হয়।
<em>	Emphasized text কে তুলে ধরতে এটি ব্যবহৃত হয়।
<small>	ছোট কোন Text কে তুলে ধরা এই tag এর দ্বারা।
<u>	Text কে underline করতে একে ব্যবহার করা হয়।
<mark>	কোন text কে হাইলাইট করতে <mark> tag ব্যবহার করা হয়।
<del>	Text কে remove করতে এই tag ব্যবহৃত হয়।
<ins>	কোন text কে add করতে এটি ব্যবহৃত হয়।
<sub>	Subscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।
<sup>	Superscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পি এইচ পি ৫ ইকো এবং প্রিন্ট স্ট্যাটমেন্ট (PHP 5 echo and print Statements)

March 19, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শরিফুল ইসলাম
Job category-Php Coder

Php তে ফলাফল পাওয়ার জন্য আমাদের echo বা print ব্যবহার করতে হয়। পিএইচপি এর প্রায় সব উদাহরন এ print বা echo এর ব্যবহার দেখতে পাওয়া যায়। কমবেশি print এবং echo এর ফাংশন প্রায় একই। তবে print এর তুলনায় echo একটু তারাতারি কাজ করে।
Echo statement ব্যবহার করে পিএইচপি তে একটি উদাহরন দেখা যাক

<?php
 echo "<h2>PHP is Fun!</h2>";
 echo "Hello world!<br>";
 echo "I'm about to learn PHP!<br>";
 echo "This ", "string ", "was ", "made ", "with multiple parameters.";
 ?>

এটি যদি রান করি তাহলে ফলাফল দেখা যাবে

PHP is Fun!

Hello world!
I'm about to learn PHP!
This string was made with multiple parameters.

Print statement ব্যবহার করে পিএইচপি তে যদি উদাহরন দেখি

<?php
 print "<h2>PHP is Fun!</h2>";
 print "Hello world!<br>";
 print "I'm about to learn PHP!";
 ?>

এটা যদি রান করি তাহলে ফলাফল হবে

PHP is Fun!

Hello world!
I'm about to learn PHP!

Root, এইচটিএমএল HTML

এইচটিএমএল এর স্টাইল (HTML Styles)

March 19, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

এইচটিএমএল এর স্টাইল (HTML Styles)

নাম-শরিফুল ইসলাম
Job category-PHP Coder
Email-bappiislam1988@gmail.com
Mob-01722806467
বিষয়- HTML Styles

এইচটিএমএল স্টাইল

প্রত্যেকটি এইচটিএমএল উপাদানের জন্য একটি ডিফল্ট বা নির্দিষ্ট স্টাইল থাকে পিছনের কালার বা ব্যাকগ্রাউন্ড কালার সাদা এবং টেক্সট এর কালার কালো। স্টাইল attribute এর মাধ্যমে আমরা এই ডিফল্ট কালার কে পরিবর্তন করতে পারি। নিচের উদাহরণ এ ব্যাকগ্রাউন্ড কালার ডিফল্ট সাদা থেকে light gray কালার এ পরিবর্তনকরা হয়েছে।

উদাহরণ

<!DOCTYPE html>
<html>
<body style="background-color:lightgrey">

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>
</html>

This is a heading

This is a paragraph.

Bgcolor attribute পুরাতন এইচটিএমএল ভার্সন এ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না

এইচটিএমএল স্টাইল attribute

এইচটিএমএল স্টাইল attribute নিম্নোক্ত syntax মেনে চলে

style="property:value"

এই প্রপার্টি হল সিএসএস এর প্রপার্টি এবং ভ্যালু হল সিএসএস এর ভ্যালু।

এইচটিএমএল টেক্সট কালার

এইচটিএমএল এর টেক্সট কালার পরিবর্তন করার জন্য color প্রপার্টি ব্যবহার করা হয়।
উদাহরণ

<body>
<h1 style="color:blue">This is a heading
<p style="color:red">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

এইচটিএমএল ফন্টস

Font-family প্রপার্টি দ্বারা ফন্টের ধরন পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

পুরাতন এইচটিএমএল এ <font> ট্যাগ সাপোর্ট করে কিন্তু এইচটিএমএল ৫ এ সাপোর্ট করে না।

এইচটিএমএল টেক্সট সাইজ

Font-size প্রপার্টি দ্বারা টেক্সট এর আকার পরিবর্তন করা হয়।
উদাহরণ

<body>
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
</body>

ফলাফল

This is a heading

This is a paragraph.

এইচটিএমএল টেক্সট alignment

Text-align প্রপার্টি দ্বারা টেক্সট horizontal ভাবে কোন দিকে অবস্থান করবে তা নির্দেশ দেওয়া হয়
উদাহরণ

<body>
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
</body>

ফলাফল

Centered Heading

This is a paragraph.

<center> ট্যাগ পুরাতন এইচটিএমএল ভার্সন এ কাজ করে নতুন এইচটিএমএল এ কাজ করে না।

একনজরে প্রপার্টি গুলো

• স্টাইল attribute এর ব্যবহার

• background-color এর ব্যবহার

• color এর সাহায্যে টেক্সট কালার এর ব্যবহার

• টেক্সট এর ফন্ট এর জন্য font-family এর ব্যবহার

• টেক্সট এর আকার এর জন্য font-size এর ব্যবহার

এবং

• text-align এর ব্যবহার।

এ এস পি . নেট এম ভি সি । ASP.Net MVC

এএসপি ডট নেট এমভিসি ASP.NET MVC কন্ট্রোলার

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

রিদওয়ান বিন শামীম
এএসপি ডট নেট এমভিসিতে কন্ট্রোলার যোগ করতে যে প্রক্রিয়া প্রয়োজন তা অনেকটা এরকম, প্রথমে কন্ট্রোলার ফোল্ডার তৈরি করতে হবে। কন্ট্রোলার ফোল্ডারে কন্ট্রোলার ক্লাসেস (controller classes) থাকে, যা ব্যবহারকারীর ইনপুট ও রেসপন্স নির্ধারণ করে। MVC তে সব কন্ট্রোলারের নামের শেষে "Controller"এক্সটেনশন থাকতে হয়। উদাহরণ স্বরূপ বলা যায়
ভিজুয়াল ওয়েব ডেভলপাররা কোন ফাইল তৈরি করলে : হোমপেজ ও এবাউট পেজের নাম দেবে HomeController.cs এবং লগ অন পেজের নাম দেবে AccountController.cs । যেটা সার্ভারের ডিফল্ট ডিরেক্টরিতে "default.asp" নামে দেখানো হবে। কিন্তু MVC framework এ কন্ট্রোলার ক্লাসের মাধ্যমে এই কাজটি করা হয়। কন্ট্রোলার দ্বারা ডাটা, রিকুয়েস্ট, ইনপুট ও রেসপন্স নির্ধারণ করা হয়। হোম কন্ট্রোলার ফাইল ইনডেক্স ও এবাউট কন্ট্রোলদুটি ঠিক রাখে। HomeController.cs ফাইল যে ধরণের কোড ব্যবহার করে তা নিচে দেয়া হল। using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{return View();}

public ActionResult About()
{return View();}
}
}
ভিউ ফোল্ডারের Index.cshtml এবং About.cshtml ফাইল গুলো কন্ট্রোলারের ActionResult views Index() এবং About() in the controller ইত্যাদি নির্দেশ করে।

Root

JavaScript Debugging

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

নাম-শরিফুল ইসলাম

ডিবাগার ছাড়া আপনি খুব তাড়াতাড়ি আপনার লিখিত javascript কোড হারিয়ে ফেলবেন। ডিবাগার ছাড়া javascript কোড লেখা খুব কঠিন। আপনার কোড এ syntax এরর অথবা logical এরর থাকতে পারে, এইগুলোকে চিহ্নিত করা কঠিন। প্রায় যখন javascript কোড এ কোন এরর থাকে কিছুই হয় না , কোন এরর বার্তা দেখায় না এবং আপনি কোন ইঙ্গিত পাবেন না আসলে এই এরর গুলো কোথায় খুজতে হবে। সাধারনত প্রত্যেকবার আপনি যখন নতুন javascript কোড লিখতে যান তখন এরর সংঘটিত হয়।

Javascript ডিবাগার :

প্রোগ্রামিং কোডের মধ্যে কোন এরর খোঁজাকে কোড ডিবাগ বলা হয়। এটা খুব একটা সহজ নয় তবে প্রত্যেকটি আধুনিক ব্রাউজার এর সাথে ডিবাগার সংযুক্ত অবস্থায় থাকে। ইউজার দের ত্রুটির প্রতিবেদন পাওয়ার জন্য এই ডিবাগারকে অন বা অফ দুটোই করা যেতে পারে। ডিবাগার দিয়ে আপনি ব্রেকপয়েন্ট সেট করতে পারেন(কোড গণনা কোন জায়গায় থেমে গিয়েছে) এবং variable গুলো পরীক্ষা করে যখন কোড গণনা করা হয়। অন্যথায় পেজ এর পাদদেশ থেকে কিছু স্টেপস অনুসরন করা যেতে পারে। F12 কি ব্যাবহারের মাধ্যমে আপনার ব্রাউজার এর ডেবাগ্ অপশন চালু করতে পারেন এবং এর মেন্যুতে console সিলেক্ট করতে পারেন।

Console.log() মেথড :

যদি আপনার ব্রাউজার ডেবাগ্ সাপোর্ট করে তাহলে আপনি console.log() ব্যবহার করতে পারেন একটি উইন্ডো তে javascript ভ্যালু দেখার জন্য

উদাহরণ

DOCTYPE html>

<html>

<body>

<h1>My First Web Page</h1>

a = 5;

b = 6;

c = a + b;

console.log(c);

</script>

</body>

</html>

ব্রেক পয়েন্ট সেট করা :

ডেবাগ্ উইন্ডো তে আপনি javascript কোড এর মধ্যে ব্রেক পয়েন্ট সেট করতে পারেন। এতে প্রত্যেকটি ব্রেক পয়েন্ট এ javascript কোড গণনা বন্ধ করবে এবং javascript ভ্যালু পরীক্ষা করবে। পরীক্ষার পর আপনি পুনরায় কোড গণনা চালু করতে পারেন ।

ডিবাগার কি ওয়ার্ড :

ডিবাগার কি ওয়ার্ড javascript কোড গননাকে থামিয়ে দেয় এবং ডিবাগিং ফাংশন কে কল করে যদি তা থাকে। ব্রেক পয়েন্ট সেট করার মতন এটাও একি ফাংশন। যদি ডিবাগিং না থাকে তাহলে ডিবাগার statement এ কোন এফেক্ট পরে না। ডিবাগার চালু করা থাকলে এটি গননাকে থামিয়ে দেয় তৃতীয় লাইন গননার আগেই।

উদাহরণ

var x = 15 * 5;

debugger;

document.getElementbyId("demo").innerHTML = x;

ব্রাউজার এর ডিবাগিং টুল :

আপনি F12 প্রেস করার মাধ্যমে আপনার ব্রাউজার এর ডি বাগিং চালু করতে পারেন এবং মেন্যু থেকে console সিলেক্ট করতে পারেন অথবা নিচের স্টেপস গুলো অনুসরন করুন

Chrome

ব্রাউজার চালু করুন, মেন্যু থেকে টুলস সিলেক্ট করুন, টুল থেকে ডেভেলপার টুলস সিলেক্ট করুন এবং সবশেষে console সিলেক্ট করুন।

Firefox Firebug:

ব্রাউজার ওপেন করুন, এই সাইট http://www.getfirebug.com যান, নিয়মনীতি অনুসরন করুন কিভাবে ইন্সটল করতে হয়।

Internet Explorer:

Opera:

ব্রাউজার চাল করুন, এই সাইট http://dev.opera.com/articles/view/opera-developer-tools পরিদর্শন করুন, এবং নিয়মনীতি অনুসরন করুন কিভাবে ডেভেলপার console বাটন যোগ করতে হয়।

Safari Firebug:

ব্রাউজার ওপেন করুন, এই সাইট http://extensions.apple.com পরিদর্শন করুন এবং নিয়মনীতি অনুসরন করুন কিভাবে firebug lite ইন্সটল করতে হয়।

Safari দেভেলপ মেন্যু:

ব্রাউজার থেকে যান preference > Advanced in the main menu ,রেডিও বাটন চেক করে দিতে হবে (Enable Show Develop menu in menu bar), যখন মেন্যুতে ডেভেলপ নামে নতুন অপশন আসবে > তখন “show error console” বাছাই করতে হবে।

আপনি কি জানেন ?

ডিবাগিং হল এক ধরনের প্রক্রিয়া যা দিয়ে কম্পিউটার এর প্রোগ্রাম এর কোন কিছু টেস্ট করা, খুঁজা এবং এরর কে হ্রাস করা বুঝায়।

Root

JavaScript Errors (Throw and Try to Catch)

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

নাম-শরিফুল ইসলাম

JavaScript Errors - Throw and Try to Catch

Try statement দিয়ে ব্লকের কোড এ কোন ভুল আছে কিনা তা টেস্ট করবে
Catch statement দিয়ে কোন ভুল থাকলে তা নিয়ন্ত্রণ করবে
Throw statement দিয়ে কাস্টম এরর তৈরি করা হয়
Finally statement দিয়ে কোন কোড কে গণনা করা হয়, try এবং catch এর পর ফলাফল পাওয়া যায়।

এরর হতে পারে !:
Javascript কোড গণনা এর সময় বিভিন্ন কারনে এরর ঘটতে পারে। এরর হতে পারে প্রোগ্রামার এর ভুল কোড এর কারনে, ভুল ইনপুট এর কারন এবং অন্যান্য আরও অনেক কারনে
উদাহরণ

উপরের উদাহরণ এ আমরা try ব্লক এ একটি কোড তৈরি করেছি যাতে ভুল ছিল। এবং catch ব্লক এই এরর কে খুজে পেয়েছে এবং গননার মাধ্যমে তা নিয়ন্ত্রণ করেছে।
Javascript try and catch :
Try statement দিয়ে ব্লক কোড এর এরর টেস্ট করা হয় যদি try ব্লক এর মধ্যে কোন এরর ধরা পরে তখন catch statement কোড কে গণনা করে এবং এরর নিয়ন্ত্রণ করে।
এই javascript statement try এবং catch একসাথে এসেছে
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}

Javascript throws এরর :

যখন কোন এরর হয় javascript সাধারনত বন্ধ হয়ে যায় এবং এরর মেসেজ তৈরি করে। এইখানে টেকনিকাল বিষয় হল javascript এরর throw করবে।
Throw statement:
কাস্টম এরর তৈরি করার ক্ষেত্রে throw statement ব্যবহার করা হয়।এইখানে টেক নিকাল বিষয় হল javascript exception throw করে।
এই exception হতে পারে নাম্বার, স্ট্রিং, বুলিয়ান এবং কোন object.।
throw "Too big"; // টেক্সট throw করে
throw 500; // নাম্বার throw করে
যদি আমরা try এবং catch এর সাথে throw ব্যবহার করি তাহলে আমরা প্রোগ্রাম এর ধারা কে নিয়ন্ত্রণ করতে পারব এবং কাস্টম এরর মেসেজ তৈরি করতে পারব।

ইনপুট বৈধকরণ :

এই উদাহরণ ইনপুট পরীক্ষা করবে, যদি ভ্যালু ভুল হয় , তাহলে একটি এরর তৈরি হবে, এই এরর catch statement দিয়ে ধরা হবে এবং একটি কাস্টম এরর মেসেজ ডিসপ্লে করবে
উদাহরণ
Please input a number between 5 and 10:

Finally statement :
Finally statement কোড কে গণনা করবে try এবং catch এর পর ফলাফল দিবে
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
উদাহরণ
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
x = Number(x);
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}

JavaScript

জাভাস্ক্রিপ্ট বলেন্স (JavaScript Booleans)

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শরিফুল ইসলাম
Job category-Php Coder

Javascript বুলিয়ান এ মাত্র দুটি ভ্যালু আছে সত্য অথবা মিথ্যা (true or false)

বুলিয়ান ভ্যালু

প্রায়সময় প্রোগ্রামিং এ আপনার এমন ধরনের ডাটা টাইপ এর দরকার পরতে পারে যাতে একটি বা দুটি ভ্যালু থাকতে পারে যেমন

Yes/no
On/off
True/false

এইজন্য javascript এ বুলিয়ান ডাটা টাইপ আছে যেমন true এবং false

Boolean() ফাংশন

কোন একটি এক্সপ্রেশন বা একটি variable সত্য কিনা তা Boolean() ফাংশন ব্যবহার করে বাহির করা সম্ভব।

উদাহরণ

Boolean(10 > 9) সত্য দেখাবে

আরও যদি সোজাভাবে দেখি

উদাহরণ

10 > 9) সত্য দেখাবে

Comparisons এবং conditons

উদাহরনের কিছু তালিকা

অপারেটর	বর্ণনা	উদাহরণ
==	equal to	if (day == "Monday")
>	greater than	if (salary > 9000)
<	less than	if (age < 18)

বাস্তব ভ্যালু এর সাথে সবকিছু সত্য :

উদাহরণ

 100

3.14

-15

"Hello"

"false"

7 + 1 + 3.14

5 < 6

বাস্তব ভ্যালু ছাড়া সবকিছু মিথ্যা

বুলিয়ান ভ্যালু 0 হচ্ছে false
উদাহরণ

var x = 0;
 Boolean(x);// false আসবে

বুলিয়ান ভ্যালু -0 হচ্ছে false
উদাহরণ

 var x = -0;
 Boolean(x);// false আসবে

বুলিয়ান ভ্যালু “ফাকা” হচ্ছে false
উদাহরণ

var x = “”;
 Boolean(x);// false আসবে

বুলিয়ান ভ্যালু undefined হচ্ছে false
উদাহরণ

var x ;
 Boolean(x);// false আসবে

বুলিয়ান ভ্যালু null হচ্ছে false
উদাহরণ

var x = null;
 Boolean(x);// false আসবে

বুলিয়ান ভ্যালু false হচ্ছে false
উদাহরণ

var x = false;
 Boolean(x);// false আসবে

বুলিয়ান ভ্যালু NaN হচ্ছে false
উদাহরণ

var x = 10/”H”;
 Boolean(x);// false আসবে

বুলিয়ান প্রপার্টিজ এবং মেথড

প্রিমিটিভ ভ্যালু যেমন true or false, এদের কোন প্রপার্টিজ বা মেথড হয় না (কারন তারা কোন অবজেক্ট নয়)। কিন্তু javascript এ প্রিমিটিভ ভ্যালুতে প্রপার্টিজ এবং মেথড আছে। কারন javascript প্রিমিটিভ ভ্যালুকে অবজেক্ট হিসেবে গ্রহন করে যখন প্রপার্টিজ এবং মেথড গণনা করা হয়।

JavaScript, Root

জাভাস্ক্রিপ্ট স্টেটমেন্ট (JavaScript Statements)

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাভাস্ক্রিপ্ট স্টেটমেন্ট (JavaScript Statements)

শরিফুল ইসলাম
Job category-Php Coder

এইচটিএমএল এ javascript statement হল কিছু নির্দেশনা যা ওয়েব ব্রাউজার দ্বারা গণনা করা হয়।

জাভাস্ক্রিপ্ট স্টেটমেন্ট Javascript statements

এই statement ব্রাউজার কে বলবে এইচটিএমএল এর একটি উপাদান id=”demo” এর মধ্যে Hello Dolly প্রিন্ট করার জন্য
উদাহরণ

document.getElementById("demo").innerHTML = "Hello Dolly.";

জাভাস্ক্রিপ্ট প্রোগ্রাম

প্রায় প্রত্যেক javascript প্রোগ্রাম এ অনেকগুলো statement থাকে । এই statement গুলো একের পর এক গণনা করে। এই উদাহরণ এ x,y,z এর ভ্যালু দেওয়া আছে , সবশেষে z প্রিন্ট করবে
উদাহরণ

var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = z;

নোট: javascript প্রোগ্রামস (এবং javascript statements) কে বলা হয় javascript কোড।

সেমিকোলন ;

সেমিকোলন javascript statement কে আলাদা করে । প্রত্যেকটি statement এর পরে সেমিকোলন যোগ করতে হয়।

a = 5;
b = 6;
c = a + b;

যখন আমরা সেমিকোলন ব্যবহার করব statement গুলোকে এক লাইনে লেখা যাবে

a = 5; b = 6; c = a + b;

নোট: ওয়েবে আপনি উদাহরণ গুলো হয়ত সেমিকোলন ছাড়া দেখতে পাবেন, প্রত্যেকটি statement এর শেষে যে সেমিকোলন ব্যবহার করতে হবে তার কোন ধরাবাধা নিয়ম নাই তবে ব্যবহার করা খুব ভাল।

জাভাস্ক্রিপ্ট ফাঁকা স্থান Javascript white space

Javascript একইসাথে একাধিক ফাকা স্পেস বাতিল করে । আমরা জাবাস্ক্রিপ্টকে সহজে পাঠ্য করার জন্য দরকার অনুযায়ী স্পেস যোগ করতে পারি।

যেমন

var person = "Hege";
var person="Hege";
JavaScript Line Length and Line Breaks:

জাভাস্ক্রিপ্ট লাইন এর দৈর্ঘ্য এবং লাইন ব্রেক

সবচেয়ে বেশি সুপাঠ্য করার জন্য প্রোগ্রামার রা একটি লাইনে ৮০ ক্যারেক্টার এর বেশি কোন কোড লিখেন না। যদি javascript statement একটি লাইনে না হয় তবে অপারেটর এর পরে ভেঙে নতুন লাইনে লেখা যাবে
উদাহরণ

document.getElementById("demo").innerHTML =
"Hello Dolly.";

Javascript কোড ব্লক

কোড ব্লক এর ভিতর javascript statements গুলো একসাথে গ্রুপ হিসেবে হতে পারে, যা দ্বিতীয় বন্ধনীর {….} ভিতর থাকবে। কোড ব্লক এর লক্ষ্য হল একসাথে statements গুলো গণনা করা। javascript ফাংশন এ এক জায়গায় ব্লক এর মধ্যে গ্রুপ statement গুলো একসাথে খুজে পাবেন।
উদাহরণ

function myFunction() {
     document.getElementById("demo").innerHTML = "Hello Dolly.";
     document.getElementById("myDIV").innerHTML = "How are you?";
 }

জাভাস্ক্র্টি কীওয়ার্ড Javascript keywords

javascript statement কোন না কোন কি-ওয়ার্ড দিয়ে শুরু হয়। যাতে সে সঠিকভাবে পারফর্ম করতে পারে। এদের লিস্টগুলি নিচে দেওয়া হল

break	কোন সুইচ বা লুপ কে নষ্ট করে
continue	একটি লুপ থেকে জাম্প করে আবার উপর থেকে শুরু করে
debugger	javascript এর গননাকে থামিয়ে দেয়, ডিবাগিং ফাংশন কাল করে (যদি থাকে)
do ... while-	একটি ব্লক statement কে গণনা করে এবং ব্লক কে পুনরাবৃত্তি করে যতক্ষণ না কন্ডিশন সত্য হয়।
for	কন্ডিশন সত্য করার ক্ষেত্রে কোন ব্লক এর statement কে চিহ্নিত করে এবং গণনা করে
function	একটি ফাংশন ঘোষণা করে
if ... else	কন্ডিশন অনুযায়ী কোন ব্লক এর statement কে চিহ্নিত করে এবং গণনা করে
return	একটি ফাংশন থেকে বের হয়ে যায়
switch	বিভিন্ন কেস অনুযায়ী কোন ব্লক এর statement কে চিহ্নিত করে এবং গণনা করে
try ... catch	কোন ব্লক statement এর এরর নিয়ন্ত্রণ করে
var-variable	ভেরিয়েবল ঘোষণা করে

Root

Cascading Pattern. হ্যডুপ (এপাচি হ্যডুপ)ঃ

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

হ্যডুপ (এপাচি হ্যডুপ)ঃ
রিদওয়ান বিন শামীম
ক্যাসক্যাডিং প্যাটার্ন হল যন্ত্র পঠিত প্রকল্প যা ক্যাসক্যাডিং ডেভেলপমেন্ট ফ্রেমওয়ার্কে এন্টারপ্রাইজ ডাটা ওয়ার্কফ্লো তৈরি করতে সাহায্য করে। ডেভেলপমেন্ট ফ্রেমওয়ার্ক হ্যডুপ ও অন্যান্য কম্পিউটার টপোলজির উপর একটি এবস্ট্রাকসন লেয়ার তৈরি করে, যা কোন সংস্থাকে এপাচির হ্যডুপ ব্যবহার করে তথ্য ডাটাবেস,উৎস ও দক্ষতা প্রকাশ করতে সাহায্য করে কোন কারিগরি দক্ষতা ছাড়াই। এক্ষেত্রে Predictive Model Markup Language (PMML) নামক এক প্রকার কোডিং ব্যবহার করে তথ্য বিশ্লেষকরা আর, ওরাকল ইত্যাদি পদ্ধতির সাথে সমন্বয় করতে পারেন। ডাটা বিশ্লেষক ও বিজ্ঞানীরা এ প্রযুক্তির প্রধান ব্যবহারকারী।

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি ৫ ভেরিয়েবল (PHP 5 Variables)

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আক্তারুজ্জামান

Department of CSE,University of Chittagong.

ভেরিয়েবল হচ্ছে একটি স্টোরেজ এরিয়া । এইটিকে কমপিউটারের ডাটা জমা রাখার একটি অস্থায়ী বক্সের মত কল্পনা করা যায়। পিএইচপি তে ভেরিয়েবলকে ডলার চিহ্ন এবং এর পরে ভেরিয়েবলের নাম দ্বারা প্রদর্শন করা হয়। নিচে একটি উদাহরণ দিয়ে বিষয়টি বোজানো হয়েছে।

< ?php
 $text = "Hello World!";
 $num1 = 5;
 $num2 = 10.5;
 ?>

উপরের স্টেটমেন্টটা এক্সিকিউট হওয়ার পর ভেরিয়েবল $text এ থাকবে “Hello world!”, ভেরিয়েবল $num1 এ থাকবে 5 এবং ভেরিয়েবল $num2 এ থাকবে 10.5.

ভেরিয়েবল লেখার সময় আমাদের কিছু নিয়ম অনুসরণ করতে হবে, যেমনঃ

 ভেরিয়েবল সবসময় ডলার চিহ্ন দ্বারা আরম্ভ হবে এবং এর পরে ভেরিয়েবলের নাম লিখতে হবে।

 ভেরিয়েবলের নাম অবশ্যই লেটার অথবা আণ্ডারস্কোর ক্যারেকটার দ্বারা আরম্ভ করতে হবে। কখনো নাম্বার দিয়ে আরম্ভ করা যাবে না।

 আলফা-নিউমেরিক এবং আণ্ডারস্কোর ক্যারেকটার (A-z,0-9,-) ছারা অন্য কিছু ভেরিয়েবলে ব্যাবহার করা যাবে না।

 পিএইচপি তে ভেরিয়েবল কেস সেনসিটিভ । অর্থাৎ $name এবং $NAME দুইটা ভিন্ন ভেরিয়েবল হিসেবে বিবেচিত হবে।

ভেরিয়েবলের ডাটা আঊটপূটে দেখানোর জন্য পিএইচপি এর echo স্টেটমেন্টটা ব্যাবহার করতে হবে। নিচে একটি উদাহরণ দিয়ে বিষয়টি বোজানো হয়েছে।

< ?php
 $myName = "john";
 $myAge = 40;
 echo "Hello, there. My name is $myName and I am $myAge years old"
 ?>

এই কোডটার আঊটপূট হবে নিচের মত

Hello, there. My name is john and I am 40 years old.

JavaScript

জাভাস্ক্রিপ্ট সুইচ বিবৃতি (JavaScript Switch Statement in Bangla)

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শরিফুল ইসলাম
Job category-Php Coder

ভিন্ন ভিন্ন শর্তে ভিন্ন ভিন্ন কাজ পারফর্ম করার জন্য এই switch statement ব্যবহার করা হয়।

জাভাস্ক্রিপ্ট সুইচ বিবৃতি

Switch statement এর মাধ্যমে অনেকগুলো ব্লক কোড থেকে শর্ত অনুযায়ী একটি কোড পছন্দ করবে এবং সে অনুযায়ী কাজ করবে

Syntax

switch(expression) {
    case n:
        code block
        break;
    case n:
        code block
        break;
    default:
        default code block
}

এই expression একবার মূল্যায়ন করা হয়
এই expression যতগুলো কেস আছে তাদের মধ্যে তুলনা করে
যদি কোনটা মিলে যায় তবে তবে সেই কোড গণনা করে।

উদাহরণ

সপ্তাহের দিনের সংখ্যা দিয়ে আমরা সপ্তাহের নাম বের করব Sunday=0, Monday=1, Tuesday=2 ...

switch (new Date().getDay()) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
        break;
}

ফলাফল আসবে

Sunday

Break কীওয়ার্ড

Javascript কোড যখন break কি-ওয়ার্ড এ পৌঁছে তখন সে switch ব্লক কে ভেঙে দেয়। তখন অতিরিক্ত কোড গণনা করা ছেড়ে দেয়, বা ব্লকের ভিতর কোড টেস্ট করা থামিয়ে দেয়। যখন কোন statement মিলে যায় , তখন কাজ সম্পূর্ণ হয়, সে আর তখন অতিরিক্ত কোন টেস্টিং করে না।

ডিফল্ট কি-ওয়ার্ড

যদি কোন কেস না মিলে তাহলে ডিফল্ট ভাবে একটা কি ওয়ার্ড ডিসপ্লে করে যদি সেটি আমরা উল্লেখ করে দেই

উদাহরণ

যদি আজকে শনিবার বা রবিবার না হয় তাহলে ডিফল্ট মেসেজ ডিসপ্লে করবে

switch (new Date().getDay()) {
    case 6:
        text = "Today is Saturday";
        break;
    case 0:
        text = "Today is Sunday";
        break;
    default:
        text = "Looking forward to the Weekend";
}

ফলাফল

Looking forward to the Weekend

প্রচলিত কোড এবং fall through

অনেক সময় আপনি সুইচ ব্লক এর মধ্যে ভিন্ন ভিন্ন কেসে একই চদ এবাবহার করতে চান। আমাদের পরবর্তী উদাহরণ এ ঠিক এই ধরনের একটি একই কোড ব্লক দেখানো হয়েছে এবং সুইচ ব্লক এর মধ্যে ডিফল্ট কেস টি শেষ কেস হবে না।

উদাহরণ

switch (new Date().getDay()) {
    case 1:
    case 2:
    case 3:
    default:
        text = "Looking forward to the Weekend";
        break;
    case 4:
    case 5:
       text = "Soon it is Weekend";
        break;
    case 0:
    case 6:
       text = "It is Weekend";
}

যদি সুইচ ব্লকে ডিফল্ট ভাবে শেষ কেস না হয় , তাহলে মনে রাখতে হবে ব্রেক দিয়ে এর কাজ শেষ করতে হবে।

JavaScript

জাভাস্ক্রিপ্ট If…Else বিবৃতি (JavaScript If…Else Statements)

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

শরিফুল ইসলাম
Job category-Php Coder

Conditional statement ব্যবহার করা হয় ভিন্ন ভিন্ন শর্তে ভিন্ন ভিন্ন কোড পারফর্ম করার জন্য।

শর্তাধীন বিবৃতি

প্রায় আমরা যখন কোড লিখি তাতে আমরা ভিন্ন ভিন্ন শর্ত জুড়ে দেই যাতে সে শর্ত অনুযায়ী কাজ করতে পারে। এই statement ব্যবহার করার নিয়মগুলি নিচে দেওয়া হল

If ব্যবহার করার মাধ্যমে কোড গণনা হবে, যদি শর্ত সত্য হয়,
else ব্যবহার করার মাধ্যমে কোড গণনা হবে, যদি একই শর্ত সত্য না হয়,
Else if নতুন শর্ত টেস্ট করবে , যদি প্রথম শর্ত মিথ্যা হয়,
অনেকগুলো আলটারনেটিভ ব্লক কোড থেকে সঠিক কোড গণনা করার জন্য switch ব্যবহার করা হয়।

If statement syntax

If ব্যবহার করার মাধ্যমে কোড গণনা হবে, যদি শর্ত সত্য হয় ,

if (condition) {
    block of code to be executed if the condition is true
}

যদি if এর বদলে IF (বড় হাতের লেটার) ব্যবহার করা হয় তাহলে এরর আসবে

উদাহরণ

যদি ঘণ্টা ১৮ এর চেয়ে কম হয় তাহলে ডিসপ্লে করবে good day

if (hour < 18) {
    greeting = "Good day";
}

ফলাফল

Good day

Else statement

else ব্যবহার করার মাধ্যমে কোড গণনা হবে, যদি একই শর্ত সত্য না হয়,

if (condition) {
    block of code to be executed if the condition is true
} else {
    block of code to be executed if the condition is false
}

উদাহরণ

যদি ঘণ্টা ১৮ এর চেয়ে কম হয় তাহলে দেখাবে good day এবং যদি তা না হয় তাহলে দেখাবে good evening

if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}

ফলাফল

Good day

Else if statement

Else if নতুন শর্ত টেস্ট করবে , যদি প্রথম শর্ত মিথ্যা হয়
Syntax

if (condition1) {
    block of code to be executed if condition1 is true
} else if (condition2) {
    block of code to be executed if the condition1 is false and condition2 is true
} else {
    block of code to be executed if the condition1 is false and condition2 is false
}

উদাহরণ

যদি সময় ১০ থেকে কম হয় তাহলে দেখাবে good morning ,যদি ২০ থেকে কম হয় তাহলে দেখাবে good day ,যদি তা না হয় তাহলে দেখাবে good evening

if (time < 10) {
    greeting = "Good morning";
} else if (time < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

ফলাফল

Good day

এইচটিএমএল HTML

এইচটিএমএল এর অণুচ্ছেদ (HTML Paragraphs)

March 18, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

এইচটিএমএল প্যারাগ্রাফ বা অনুচ্ছেদ

নয়ন চন্দ্র দত্ত

এইচটিএমএল ডকুমেন্ট বিভিন্ন অনুচ্ছেদে ভাগ করা হয়। এর জন্য বিভিন্ন ট্যাগ রয়েছে যেগুলো ব্যবহারে দুটি লাইনকে পৃথক করা যায়।

এইচটিএমএল প্যারাগ্রাফ

এইচটিএমএল < p> উপাদান একটি অনুচ্ছেদ সংজ্ঞায়িত করে।

যেমনঃ-
<p>This is a paragraph</p>
<p>This is another paragraph</p>
[* ব্রাউজার স্বয়ংক্রিয়ভাবে অনুচ্ছেদের আগে ও পরে একটি খালি লাইন যোগ করে। ]

এইচটিএমএল প্রদর্শন

আপনি নিশ্চিত হতে পারবেন না যে কিভাবে এইচটিএমএল দেখানো হবে।

বড় বা ছোট পর্দা, এবং পরিবর্তিত windows ভিন্ন ফলাফল তৈরি করবে।

এইচটিএমএল এ, আপনি অতিরিক্ত স্পেস যোগ করা আউটপুট পরিবর্তন করতে পারবেন না।

ব্রাউজার অতিরিক্ত স্পেস এবং অতিরিক্ত লাইন মুছে ফেলবে যখন পেজটি প্রদর্শিত হয়। যেকোন স্পেস সংখ্যা এবং নতুন লাইন একটিমাত্র স্পেস হিসেবে গণনা করা হবে।

উদাহরণ

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

ফলাফল

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.

শেষ ট্যাগ দিতে ভুলে যাবেন না। যদি আপনি শেষ ট্যাগ দিতে ভুলে যান তবুও অনেক ব্রাউজার সঠিকভাবে এইচটিএমএল প্রদর্শন করে।

যেমনঃ-

<p>This is a paragraph
<p>This is another paragraph

উপরের উদাহণটি অধিকাংশ ব্রাউজারে প্রদর্শন করবে কিন্তু কিন্তু এটার উপর নির্ভর করবেন না। শেষ ট্যাগ অবশ্যই দিবেন।

শেষ ট্যাগ এর না হওয়া অপ্রত্যাশিত ফলাফল বা ত্রুটি দেখাতে পারে।

HTML এর Stricter সংস্করণ যেমন-এক্সএইচটিএমএল এ আপনাকে শেষ ট্যাগ skip করতে দিবে না। শেষ ট্যাগ অবশ্যই দিতে হবে।

এইচটিএমএল লাইন ব্রেক

এইচটিএমএল <br> উপাদান একটি লাইন বিরতি দিতে ব্যবহৃত হয়।

প্যারাগ্রাফ ব্যবহার না করে <br> ব্যবহার করুন যদি আপনার নতুন একটি লাইনের দরকার হয়।

যেমনঃ-
<p>This is<br>a para<br>graph with line breaks</p>

<br> উপাদান একটি খালি এইচটিএমএল উপাদান। এর কোন শেষ ট্যাগ নেই।

কবিতা সমস্যা

উদাহরণ

<p>In HTML, spaces and new lines are ignored:</p>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

ফলাফল

In HTML, spaces and new lines are ignored:

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

এইচটিএমএল <pre> উপাদান

<pre> এলিমেন্ট পূর্ববিন্যাসিত টেক্সটকে সংজ্ঞায়িত করে।

<pre> এলিমেন্ট এর ভিতরের টেক্সগুলো নির্দিশ্ট পরিমান প্রসস্থ ফন্ট স্পেস এবং লাইন ব্রেক উভয় অপরিবর্তিত রেখে প্রদর্শন করে।

যেমনঃ-

<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.
</pre>

ফলাফল

The pre tag preserves both spaces and line breaks:

   My Bonnie lies over the ocean.

   My Bonnie lies over the sea.

   My Bonnie lies over the ocean.
   
   Oh, bring back my Bonnie to me.

এইচটিএমএল ট্যাগ রেফারেন্স

ট্যাগঃ <p>
ব্যাখ্যাঃ প্যারাগ্রাফ সজ্ঞায়িত করে।

ট্যাগঃ <br>
ব্যাখ্যাঃ একটি লাইন বিরতি দেয়।

ট্যাগঃ <pre>
ব্যাখ্যাঃ প্রাক ফরম্যাট টেক্সট সজ্ঞায়িত করে।

JavaScript, JavaScript Frameworks

JavaScript Hoisting

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাভাস্ক্রিপ্ট হোস্টিং
ডাটা টাইপ ডিক্লেয়ারেশনের জন্য হোস্টিং জাভাস্ক্রিপ্টের একটি ডিফল্ট বেবস্থা।

জাভাস্ক্রিপ্টে ডিক্লেয়ারেশন হোস্ট পদ্ধতিতে হয়:
জাভাস্ক্রিপ্টে একটি ভেরিয়েবলকে ডিক্লেয়ার করার পূর্বে এটি বেবহার করা যায়।
অর্থাৎ ভেরিযবল টাইপ ডিক্লেয়ার করার আগেই তা বেবহার করা যায়।
নিচের উদাহরণ ১ এবং উদাহরণ ২ এর আউটপুট একই হবে:
উদাহরণ ১:
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
var x; // Declare x
উদাহরণ ২:
var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element
উপরোক্ত উদাহরণগুলো বোঝার জন্য প্রথমে হোস্ট সম্পর্কে ভালো ধারণা থাকতে হবে।
হোস্টিং হলো জাভাস্ক্রিপ্টের একটি ডিফল্ট বেবস্থা যা কোনো একটি কারেন্ট ফাংশন বা স্ক্রিপ্টের সকল ডিক্লেয়ারেশন প্রথমেই ঠিক করে রাখে।

জাভাস্ক্রিপ্টে ইনিশিয়ালাইজ হোস্ট পদ্ধতিতে করা যায় না:
জাভাস্ক্রিপ্ট শুধুমাত্র ডিক্লেয়ারেশনকে হোস্ট করে ইনিশিয়ালাইজেশনকে হোস্ট করে না।
নিচের উদাহরণ ১ এবং উদাহরণ ২ এর আউটপুট এক হবে না:
উদাহরণ ১:
var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
উদাহরণ ২:
var x = 5; // Initialize x
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
var y = 7; // Initialize y

উদাহরণ ২ এ y প্রথমে ইনিশিয়ালাইজ করা হয়নি তাই y এখানে আনডিফাইনড দেখাবে।
উদাহরণ ২ কে নিচের উপায়ে লিখতে হবে:
var x = 5; // Initialize x
var y; // Declare y
elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y
y = 7; // Assign 7 to y

ভেরিয়েবলকে প্রথমে ডিক্লেয়ার করা:
জাভাস্ক্রিপ্টের অনেক ডেভলোপারদের কাছে হোস্টিং বিষয়টি সম্পূর্ণ পরিস্কার নয়, যদি কেউ হোস্টিং এর সঠিক বেবহার না জানে তাহলে প্রোগ্রামে অনেক বাগ থাকতে পারে, এই সমস্যা সমাধানের জন্য ভেরিয়েবলকে সবসময় শুরুতে ডিক্লেয়ার করা ভালো। তাছাড়াও জাভাস্ক্রিপ্ট যেহেতু একটি ইন্টারপ্রেটিং লেঙ্গুয়েজ তাই প্রোগ্রামিংএর জন্য এটি একটি সুন্দর চর্চ়াও।

JavaScript

জাভাস্ক্রিপ্ট While Loop

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

মোঃ আব্দুল্লাহ

যতক্ষণ পর্যন্ত একটি নির্দিষ্ট বিবৃতি সত্য ততক্ষণ পর্যন্ত লুপ একটি কোডের ব্লক পরিচালনা করতে পারে।

Syntax

while (condition বা চলক ) {
         আপনার কোড
 }

উদাহরণ
নিম্নের উদাহরণে যতক্ষণ পর্যন্ত চলকের মান (এই ক্ষেত্রে i এর মান) ১০ এর কম, কোডের লুপটি চলতে থাকবে ।

while (i < 10) {
    text += "The number is " + i;
    i++;
}

উল্লেখ্য যে, যদি কখনও ভুল করে চলকের মান বৃদ্ধি না করা হয় তবে লুপটি কখনই শেষ হবে না এবং প্রোগ্রামটি ক্রাশ করবে ।

The Do/While Loop

Do/While লুপ হল একটি চলক লুপ। এই লুপটি একবার বিবৃতিটির সত্যতা যাচাই করে ব্লকটি পরিচালনা করবে, এরপর লুপটি যতক্ষণ পর্যন্ত বিবৃতিটির সত্য ততক্ষণ পর্যন্ত লুপটি বারবার পরিচালনা করবে।
Syntax

do {
    code block to be executed
}
while (condition);

উদাহরণ
নিম্নের উদাহরণটি একটি ডু /হয়াইল লুপ। এই লুপটি সর্বদা একবার পরিচালিত হবে যদিও বিবৃতিটি ভুল হয়, কারন বিবৃতি যাচাই এর আগেই কোডের ব্লকটি পরিচালিত হয়।

do {
    text += "The number is " + i;
    i++;
}
while (i < 10);

উল্লেখ্য যে, চলকের মান বৃদ্ধির কথা ভুলে গেলে হবে না, নাহলে লুপটি কখনই শেষ হবে না।

For এবং While এর মধ্যে তুলনা

তুমি যদি লুপ সম্পর্কে আগের অধ্যায়টি পড়ে থাকো তবে তুমি জানতে পারবে যে হয়াইল লুপ ও ফর লুপ প্রাই একই, শুধু ১ ও ৩ নং বিবৃতি বাদে।

নিম্নের উদাহরণে ফর লুপ ব্যবহার করে cars নামক array থেকে গাড়ির নাম খুজে বের করা হয়েছে ।

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";

for (;cars[i];) {
    text += cars[i] + "<br>";
    i++;
}

নিম্নে হয়াইল লুপের একটি উদাহরণ যা cars নামক array থেকে গাড়ির নাম খুজে বের করার জন্য ব্যবহ্রত হয়েছে ।

var cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
var text = "";

while (cars[i]) {
    text += cars[i] + "<br>";
    i++;
}

JavaScript

জাভাস্ক্রিপ্ট ডেট মেথড (JavaScript Date Methods)

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

ডেট মেথডের সাহায্যে ডেট ভেলু পাওয়া যায় এবং তা বেবহার করা যায়, যেমন বছর, মাস, দিন, মিনিট, সেকেন্ড, মিলিসেকেন্ড।

Date Get মেথড

একটি ডেটের কোন একটি অংশকে পাওয়ার জন্য ডেট গেট মেথড বেবহার করা হয়:

মেথড	বর্ণনা
getDate()	ডেট নাম্বার পাওয়ার জন্য যেমন: ১-৩১
getDay()	সপ্তাহ নাম্বার পাওয়ার জন্য
getFullYear()	বছরের সবগুলো ডিজিট পাওয়ার জন্য যেমন: ২০১৫
getHours()	ঘন্টা জানার জন্য
getMilliseconds()	মিলিসেকেন্ড হিসেবের জন্য
getMinutes()	মিনিট হিসেবের জন্য
getMonth()	মাস হিসেবের জন্য
getSeconds()	সেকেন্ড হিসেবের জন্য
getTime()	১৯৭০ থেকে এই পর্যন্ত সময়কে মিলিসেকেন্ডে হিসেবের জন্য

getTime() মেথড

১৯৭০ থেকে এই পর্যন্ত সময়কে মিলিসেকেন্ডে হিসেবের জন্য এই মেথড বেবহৃত হয়।
উদাহরণ:

 <script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>

getFullYear() মেথড

বছরের সবগুলো ডিজিট পাওয়ার জন্য এই মেথড বেবহৃত হয়।
উদাহরণ:

 <script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>

getDay() মেথড

সপ্তাহ নাম্বার পাওয়ার জন্য এই মেথড বেবহৃত হয়।
উদাহরণ:

 <script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>

এরে বেবহার করেও এই মেথডে দেখানো যায়:

 <script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("demo").innerHTML = days[d.getDay()];
</script>

Date Set মেথড

একটি ডেটের গেট মেথড বেবহার করে পাওয়া কোন একটি অংশকে সেট করার জন্য ডেট সেট মেথড বেবহার করা হয়:

মেথড	বর্ণনা
setDate()	ডেট নাম্বার সেট করার জন্য যেমন: ১-৩১
setFullYear()	বছরের সবগুলো ডিজিট সেট করার জন্য যেমন: ২০১৫
setHours()	ঘন্টা জানার জন্য
setMilliseconds()	মিলিসেকেন্ড সেট করার জন্য
setMinutes()	মিনিট সেট করার জন্য
setMonth()	মাস সেট করার জন্য
setSeconds()	সেকেন্ড সেট করার জন্য
setTime()	১৯৭০ থেকে এই পর্যন্ত সময়কে মিলিসেকেন্ডে সেট করার জন্য

setFullYear() মেথড

বছরের সব তথ্য সেট করার জন্য এই মেথড বেবহৃত হয়। উদাহরণ হিসেবে ১৪ই জানুয়ারী ২০২০ কে দেখানো হয়েছে।
উদাহরণ:

<script>
var d = new Date();
d.setFullYear(2020, 0, 14);
document.getElementById("demo").innerHTML = d;
</script>

setDate() মেথড

ডেট নাম্বার সেট করার জন্য এই মেথড বেবহৃত হয়।
উদাহরণ ১:

<script>
var d = new Date();
d.setDate(20);
document.getElementById("demo").innerHTML = d;
</script>

উদাহরণ ২:

<script>
var d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>

ডেট ইনপুট-পার্সিং

ডেট ইনপুট এর মাধ্যমে কোনো ডেটের ভেলু নিয়ে তাকে Date.parse() মেথডের সাহায্যে মিলিসেকেন্ডে কনভার্ট করা যায়, Date.parse() মেথড কোনো একটি ভেলু/ডেট এবং ১৯৭০ থেকে সেই পর্যন্ত সময়কে মিলিসেকেন্ডে কনভার্ট করে।
উদাহরণ ১:

<script>
var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;
</script>

উদাহরণ ২:

ডেট কম্পেয়ার

দুইটি ডেটের মধ্যে খুব সহজেই কম্পেয়ার করা যায়।
উদাহরণ:

var today, someday, text;
today = new Date();
someday = new Date();
someday.setFullYear(2100, 0, 14);

if (someday > today) {
    text = "Today is before January 14, 2100.";
} else {
    text = "Today is after January 14, 2100.";
}
document.getElementById("demo").innerHTML = text;

হিন্টস: জাভাস্ক্রিপ্টে মাস গনণা শূন্য থেকে শুরু হয়, জানুয়ারী ০ ডিসেম্বর ১১

JavaScript

জাভাস্ক্রিপ্ট ম্যাথ অবজেক্ট (JavaScript Math Object)

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাভাস্ক্রিপ্ট ম্যাথ অবজেক্ট (JavaScript Math Object)

ম্যাথ অবজেক্টের সাহায্যে সংখা ও ম্যাথমেটিকাল টার্ম নিয়ে কাজ করা যায়।

ম্যাথ অবজেক্ট

ম্যাথ অবজেক্টের সাহায্যে ম্যাথমেটিকাল টার্ম নিয়ে কাজ করা যায়।

ম্যাথ অবজেক্টে অনেকগুলো ম্যাথমেটিকাল মেথড অন্তর্ভুক্ত রয়েছে।

ম্যাথ অবজেক্টের একটি সাধারণ কাজ হলো রেন্ডম নাম্বার তৈরি করা:

Math.random();        // returns a random number

Math.min() ও Math.max() মেথড

Math.min() ও Math.max() মেথড সর্বচ্চো ও সর্বনিম্ন নাম্বার বের করার জন্য বেবহৃত হয়:
উদাহরণ ১:

Math.min(0, 150, 30, 20, -8);        // returns -8

উদাহরণ ২:

Math.max(0, 150, 30, 20, -8);        // returns 150

Math.random() মেথড

Math.random() মেথড ০ এবং ১ এর মধ্যে যে কোনো একটি নাম্বার নেয়ার জন্য বেবহৃত হয়।
উদাহরণ:

Math.random();           // returns a random number

Math.round() মেথড

Math.round() মেথড এর সাহায্যে একটি সংখ্যার রাউন্ডঅফ ভেলু বের করা যায়।
উদাহরণ:

Math.round(4.7);       // returns 5
 Math.round(4.4);      // returns 4

Math.celi() মেথড

Math.celi() মেথড এর সাহায্যে একটি সংখ্যাকে নিকটস্ত সর্বচ্চো সংখ্যাতে রাউন্ড করা হয়।
উদাহরণ:

Math.ceil(4.4);       // returns 5

Math.floor() মেথড

Math.floor() মেথড এর সাহায্যে একটি সংখ্যাকে নিকটস্ত সর্বনিম্ন সংখ্যাতে রাউন্ড করা হয়।
উদাহরণ:

Math.floor(4.7);      // returns 4

Math.floor() এবং Math.random() মেথড একত্রে বেবহার করে ১ থেকে ১০ এর মধ্যে রেন্ডম নাম্বার তৈরী করা যায়।
উদাহরণ:

Math.floor(Math.random() * 11);       // returns a random number between 0 and 10

ম্যাথ কন্সটেন্টস

ম্যাথ অবজেক্ট হিসেবে বেবহার করার জন্য জাভাস্ক্রিপ্টে ৮টি ম্যাথমেটিকাল কন্সটেন্ট রয়েছে।

 Math.E;         // returns Euler's number
 Math.PI         // returns PI
 Math.SQRT2      // returns the square root of 2
 Math.SQRT1_2    // returns the square root of 1/2
 Math.LN2        // returns the natural logarithm of 2
 Math.LN10       // returns the natural logarithm of 10
 Math.LOG2E      // returns base 2 logarithm of E
 Math.LOG10E     // returns base 10 logarithm of E

ম্যাথ অবজেক্ট মেথডস

মেথড	বর্ণনা
abs(x)	x এর এবসুলেট ভেলু বের করে
acos(x)	x এর arccosine রেডিয়ানে বের করে
asin(x)	x এর arcsine রেডিয়ানে বের করে
atan(x)	x এর arctangent রেডিয়ানে বের করে
atan2(y,x)	x এর arctangent বের করে
ceil(x)	x কে নিকটস্ত সর্বচ্চো সংখ্যাতে রাউন্ড করে
cos(x)	x এর cosine রেডিয়ানে বের করে
exp(x)	Ex এর মান বের করে>/td>
floor(x)	x কে নিকটস্ত সর্বনিম্ন সংখ্যাতে রাউন্ড করে
log(x)	x এর লগারিদম বের করে
max(x,y,z,...,n)	সর্বচ্চো নাম্বার বের করে
min(x,y,z,...,n)	সর্বনিম্ন নাম্বার বের করে
pow(x,y)	x এর উপর y এর পাওয়ার বের করে
random()	০ এবং ১ এর মধ্যে যে কোনো একটি রেন্ডম নাম্বার নেয়ার জন্য বেবহৃত হয়
round(x)	নিকটস্ত পূর্ণসংখাতে রাউন্ড অফ করে
sin(x)	x এর sine রেডিয়ানে বের করে
sqrt(x)	x এর স্কয়াররুট বের করে
tan(x)	x এর tangent এর মান বের করে

JavaScript

জাভাস্ক্রিপ্ট স্কোপ (JavaScript Scope)

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাভাস্ক্রিপ্ট স্কোপ (JavaScript Scope)

স্কোপ হচ্ছে একসেস করা যায় এরকম ভেরিয়েবল।
জাভাস্ক্রিপ্টে অবজেক্ট এবং ফাংশনও ভেরিয়েবল হিসেবে বেবহৃত হয়, এখানে স্কোপ হচ্ছে ভেরিয়েবল, অবজেক্ট এবং ফাংশনের সেট যেখানে একসেস করা যায়।

লোকাল জাভাস্ক্রিপ্ট ভেরিয়েবল

জাভাস্ক্রিপ্টের ফাংশনের ভেতরে যেসব ভেরিযবল ডিক্লেয়ার করা হয় তা ঐ ফাংশনেগুলো লোকাল ভেরিযবল এবং এর স্কোপ লোকাল। এই ভেরিযবল শুধুমাত্র ঐ ফাংশনে ব্যবহার করা যাবে।
উদাহরণ:

// code here can not use carName
 
 function myFunction() {
     var carName = "Volvo";
 
     // code here can use carName
 
 }

যেহেতু লোকাল ভেরিয়েবল শুধুমাত্র নির্দিষ্ট ফাংশনে ব্যবহৃত হয় তাই একই নামের ভেরিয়েবল বিভিন্ন ফাংশনে ব্যবহার করা যাবে। একটি ফাংশন কল করা হলে লোকাল ভেরিয়েবল তৈরী হয় এবং ফাংশন শেষে ধ্বংশ হয়ে যায়।

গ্লোবাল জাভাস্ক্রিপ্ট ভেরিয়েবল

ফাংশনের বাহিরে যেসব ভেরিযবল ডিক্লেয়ার করা হয় সেগুলো গ্লোবাল ভেরিযবল। গ্লোবাল ভেরিযবলের স্কোপ গ্লোবাল থাকে, ওয়েবপেজের সকল স্ক্রিপ্ট এবং ফাংশন থেকে তা একসেস করা যায়।
উদাহরণ:

var carName = " Volvo";
 
 // code here can use carName
 
 function myFunction() {
 
     // code here can use carName 
 
 }

অটোমেটিক গ্লোবাল

আপনি যদি কোন ভেরিয়েবল এর মান নির্ধারণ করে দেন যা আগে ডিক্লেয়ার করা হয়নি এটি সয়ংক্রিয়ভাবে গ্লোবাল ভেরিয়েবল এ পরিণত হয়।

এই উদাহরণ এ carName কে গ্লোবাল ভেরিয়েবল হিসেবে ডিক্লেয়ার করা হয়েছে।

// code here can use carName
 
 function myFunction() {
     carName = "Volvo";
 
     // code here can use carName
 
 }

জাভাস্ক্রিপ্ট ভেরিযবলের লাইফটাইম

কোন ভেরিযবল ডিক্লেয়ার করার সময় থেকেই জাভাস্ক্রিপ্ট ভেরিযবলের লাইফটাইম শুরু হয়।

কোন ফাংশন কমপ্লিট হওয়ার পর লোকাল ভেরিযবলের লাইফটাইম শেষ হয়ে যায়।

পেজ ক্লোজ করার পর গ্লোবাল ভেরিযবলের লাইফটাইম শেষ হয়ে যায়।

ফাংশনাল আর্গুমেন্ট

ফাংশনাল আর্গুমেন্ট ফাংশনের ভেতরে লোকাল ভেরিযবল হিসেবে কাজ করে।

HTML এ গ্লোবাল ভেরিযবল

HTML এ গ্লোবাল ভেরিযবল বলতে উইন্ডো অবজেক্টকে বোঝানো হয়, সকল গ্লোবাল ভেরিযবল উইন্ডো অবজেক্টের অন্তর্গত।
উদাহরণ:

// code here can use window.carName
 
 function myFunction() {
     carName = "Volvo";
 }

নোট: গ্লোবাল ভেরিয়েয়েবল বা ফাংশন, আপনার উইন্ডোজ ভেরিয়েবল বা ফাংশনকে অভাররাইট করতে পারে।

Root

C হেডার ফাইল

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

C হেডার ফাইল

Mir Rasel

Jahangirnagar University, Dhaka, Bangladesh.

হেডার ফাইল হলো এক্সটেনশন সমৃদ্ধ ফাইল .h যা C ফাংশন এর ঘোষণা বহন করে এবং দীর্ঘ সংজ্ঞাও বহন করে যা কয়েকটি আলাদা সোর্স ফাইলের মধ্যে শেয়ারকৃত থাকে। দুই ধরণের হেডার ফাইল আছেঃ একটি হলো যা প্রোগ্রামাররা লিখে এবং অন্যটি সংকলিত হয়ে আসে।

আপনি হেডার ফাইল ব্যবহার করার জন্য আপনার প্রোগ্রামকে অনু্রোধ করতে পারেন যাকিনা C ফাইলকে পূর্ব প্রক্রিয়াজাতকরণের নির্দেশ দিতে পারে যা হেডার ফাইলে .h আকারে আপনি দেখতে পাবেন, যা আপনার সঙ্কলকের সাথে আসবে।

হেডার ফাইলের সাথে সংযুক্ত করা হেডার ফাইল কন্টেন্টকে কপি করার সমান, কিন্তু আমরা এটি ব্যবহার করতে পারিনা কারণ এটাতে অনেক ভুল হওয়ার প্রবণতা থাকে এবং এটি হেডার ফাইল থেকে সোর্স কপি করার জন্য ভালো ধারণা নয়, বিশেষ করে যখন আমাদের বেশ কয়টি সোর্স ফাইলের প্রোগ্রাম গঠিত থাকে।\

একটি সাধারণ C অথবা C++ চর্চার ফাইলে আমরা সকল কন্সন্যান্টস, ম্যাক্রোস, সিস্টেমে বিস্তীর্ণ থাকা গ্লোবাল ভ্যারিয়েবলস এবং হেডার ফাইলের ফাংশন গুলোর নমুনা এবং হেডার ফাইল যেখানে আমাদের এটি দরকার হয় তা রাখি।

অন্তর্ভূক্ত শব্দবিন্যাস

ঊভয় ব্যবহারকারী এবং সিস্টেমের হেডার ফাইল #include ডাইরেক্টিভে পূর্ব প্রক্রিয়াজাত হয়। এটি দু’ ধরণের ফরম অনুসরণ করে।

#include "file"

এই ফরমটি আমদের নিজেদের প্রোগ্রামের হেডার ফাইলে ব্যবহৃত হয়। এটি ডাইরেক্টেরিতে ফাইল নেইম খুঁজতে পারে যা কারেন্ট ফাইল বহন করে। আপনি যখন আপনার সোর্স কোড লিখবেন তখন ডাইরেক্টরি ফাইলকে এই তালিকায় প্রিপেন্ড করতে পারেন যা –I অপশনে থাকবে।

সংযুক্ত অপারেশন

#include দ্বারা সংযুক্ত ডাইরেক্টিভ C পূর্বপ্রক্রিয়াজাতকরণ দ্বারা কাজ করে যা নির্দেশিত ফাইল স্ক্যান করতে পারে যা কারেন্ট সোর্স ফাইল সংযুক্ত করার পূর্বেই ইনপুট হয়। আউটপুট ফরমটি পূর্ব পূর্বপ্রক্রিয়াজাতকৃত ফাইল যা ইতিমধ্যেই জেনারেটেড হয়েছে, যা আউটপুট অনুসরণ করেছে যা টেক্সট লেখার আগে #include ডাইরক্টিভে আছে। যেমন উদাহরণঃ আপার যদ .h ওয়ালা একটি হেডার ফাইল থাকে, যা নিচের মতঃ

এবং একটি প্রধান প্রোগ্রাম যা program.c নামে ডাকা হয়

char *test (void); program.c that uses the header file, like this:int x;#include "header.h" int main (void){ puts (test ());}

the compiler will see the same token stream as it would if program.c read

int x;char *test (void); int main (void){ puts (test ());}

Source: http://www.tutorialspoint.com/cprogramming/c_header_files.htm

JavaScript

জাভাস্ক্রিপ্ট পরিচিতি (JavaScript Introduction)

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জাভাস্ক্রিপ্ট পরিচিতি

পৃথিবীর জনপ্রিয় প্রোগ্রামিং লেঙ্গুয়েজ গুলোর মধ্যে জাভাস্ক্রিপ্ট অন্যতম। নিচে জাভাস্ক্রিপ্টের বৈশিষ্ঠ্যসহ কিছু উদাহরণ দেয়া হয়েছে।

জাভাস্ক্রিপ্ট HTML এর কন্টেন্টকে পরিবর্তন করতে পারে

একটি অন্যতম HTML মেথড হল document.getElementById()
এই উদাহরণের সাহায্যে HTML কন্টেন্ট থেকে আইডি (id="demo") এর সাহায্যে কোনো কন্টেন্ট খুঁজে বের করা যায় এবং তা পরিবর্তন করা যায় (innerHTML)।
উদাহরণ:

document.getElementById("demo").innerHTML = "Hello JavaScript";

জাভাস্ক্রিপ্ট HTML এর এট্রিবিউটকে পরিবর্তন করতে পারে

যেমন কোনো HTML <img> কন্টেন্টের সোর্স পরিবর্তন করে ইমেজ পরিবর্তন করা।

যেমন:

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>

ফলাফলঃ

JavaScript Can Change Images

Click the light bulb to turn on/off the light.

জাভাস্ক্রিপ্ট HTML এর স্টাইলকে(CSS) পরিবর্তন করতে পারে

HTML এর স্টাইলকে পরিবর্তন করা অনেকটা HTML এর এট্রিবিউটকে পরিবর্তন করার মতোই।
উদাহরণ:

document.getElementById("demo").style.fontSize = "25px";

জাভাস্ক্রিপ্ট ডাটার ভেলিডিটি চেক করতে পারে

ডাটা টাইপ এবং অন্যান্য ডাটা ভেলিডেশনের ক্ষেত্রে জাভাস্ক্রিপ্ট বেবহার করা হয়।

জাভাস্ক্রিপ্ট সম্পর্কে আরো তথ্য

জাভাস্ক্রিপ্ট এবং জাভা কনসেপ্ট ও ডিজাইন সকল দিক থেকে সম্পূর্ণ আলাদা দুইটি লেঙ্গুয়েজ
১৯৯৫ সালে ব্রেন্দেন ইক নামক একজন বেক্তি এই লেঙ্গুয়েজ আবিষ্কার করেন এবং ১৯৯৭ সালে এটি ECMA স্ট্যান্ডার্ড লাভ করে
এর অফিসিয়াল নেম হচ্ছে ECMA-262 এবং ECMAScript 5 (JavaScript 1.8.5 - July 2010) হচ্ছে লেটেস্ট স্ট্যান্ডার্ড

উইন্ডোজ 8.1

উইন্টোজ 8.1 টিউটোরিয়াল: অনড্রাইভ (OneDrive)

March 17, 2015 Rafiqul Islam

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

উইন্টোজ টিউটোরিয়াল 11 এর 11

আপনার জীবনের সবকিছু এক জায়গায়

উইন্ডোজ 8.1 এবং উইন্ডোজ আরটি 8.1 এ, আপনি সহজেই আপনার সকল ফাইল OneDrive এ রেখে দিতে পারেন এবং যেকোন ডিভাইস থেকে তাদের সংগ্রহ করতে পারেন, যেমন আপনার পিসি, টেবলেট বা ফোন।

অনড্রাইভ হচ্ছে বিনা মূল্যে প্রাপ্ত অনলাইন স্টোরেজ (ইন্টারনেট এ প্রয়োজনীয় সকল ফাইল বা যেকোন কিছু জমা করে রাখার স্থান), যা মাইক্রোসফট অ্যাকাউন্ট এর সাথে আসে। এটি একটি বাড়তি হার্ড ড্রাইভ এর মত যা আপনি যেকোন ডিভাইস থেকেই ব্যবহার করতে পারেন। আপনার নিজে নিজেকে ইমেইল করার প্রয়োজন নেই বা USB flash drive (পেন ড্রাইভ) ব্যবহার করে বয়ে নিয়ে যাওয়ার প্রয়োজন নেই। আপনার ল্যাপটপে যা কিছু আছে এবং প্রেজেন্টেশন এর উপর কাজ করার জন্য, আপনার নতুন ট্যাবলেট এ পরিবারের সাথে শেষ ছুটি কাটানোর ছবি দেখা, বা আপনার ফোনে শপিং লিস্ট দেখা ইত্যাদি করার পরিবর্তে আপনি আপনার ফাইল অনড্রাইভ এ রেখে দিতে পারেন।

OneDrive ব্যবহার করা খুবই সহজ। আপনি কপি বা মুভ করা ছাড়াই আপনার পিসি থেকে ফাইল OneDrive এ রেখে দিতে পারেন। যখন আপনি নতুন ফাইল সংরক্ষণ করবেন, আপনি OneDrive নির্বাচন করে দিতে পারেন, যাতে আপনি যেকোন ডিভাইস থেকে এগুলো সংগ্রহ করতে পারেন এবং অন্য লোকেদের সাথে তা শেয়ার করতে পারেন। এবং আপনার পিসিতে যদি ক্যামেরা থাকে, তাহলে সয়ংক্রিয়ভাবে ক্যামেরায় তোলা ছবি OneDrive এ সংরক্ষণ করতে পারেন। সুতরাং আপনার ডাটার সমসময়ই একটি ব্যাকআপ থাকছে।

OneDrive এ ফাইল যোগ করা

OneDrive এ ফাইল সংরক্ষণের ভিন্ন ভিন্ন পন্থা রয়েছে। প্রথমে সিদ্ধান্ত নিন যে আপনি আপনার মূল ফাইল পিসিতে রেখেদিবেন কিনা এবং একটি কপি OneDrive এ রাখবেন কিনা। বা পিসি থেকে মুছে (মুভ করে) OneDrive এ সংরক্ষণ করবেন কিনা।

OneDrive অ্যাপ্লিকেশন ব্যবহার করে ফাইল OneDrive এ কপি করা

ধাপ 1: Start Screen এ OneDrive অ্যাপ্লিকেশন খোলার জন্য OneDrive এ টোকা দিন বা ক্লিক করুন।

ধাপ 2: টোকা দিয়ে বা ক্লিক করে OneDrive এর কোন ফোল্ডার এ ফাইল রাখতে চান সেখানে যান।

ধাপ 3: অ্যাপ কমান্ড খোলার জন্য সুইপ করে পর্দার উপরের বা নিচের প্রান্তে যান বা ডান-ক্লিক করুন এবং তারপর Add files এ টোকা দিন বা ক্লিক করুন।

ধাপ 4: আপনি যে ফাইল আপলোড করতে চান ব্রাইজ করে সেই ফাইল এ যান, তাদের সিলেক্ট (নির্বাচন) করার জন্য টোকা দিন বা ক্লিক করুন এবং তারপর Copy to OneDrive এ টোকা দিন বা ক্লিক করুন।

OneDrive অ্যাপ্লিকেশন ব্যবহার করে ফাইল OneDrive এ মুভ করা

যখন আপনি কোন ফাইল মুভ করবেন তখন আপনার ফাইল পিসি থেকে মুছে OneDrive এ যোগ হবে।

ধাপ 1: OneDrive এ নেক্সট চিহ্নিত তীর এ টোকা দিন বা ক্লিক করুন।

ধাপ 2: আপনি যে ফাইল আপলোড করতে চান ব্রাইজ করে সেই ফাইল এ যান, তাদের সিলেক্ট (নির্বাচন) করার জন্য টোকা দিন বা ক্লিক করুন এবং তারপর Copy to OneDrive এ টোকা দিন বা ক্লিক করুন।

ধাপ 3: Cut এ টোকা দিন বা ক্লিক করুন।

ধাপ 4: This PC এ যেতে নেক্সট চিহ্নিত তীর এ টোকা দিন বা ক্লিক করুন, এবং OneDrive এর ফোল্ডার ব্রাউজ করার জন্য OneDrive নির্বাচন করুন।

ধাপ 5: অ্যাপ কমান্ড খোলার জন্য পর্দার উপর বা নিচের দিকের প্রান্তে সুইপ করে যান বা ডান-ক্লিক করুন এবং তারপর Paste এ টোকা দিন বা ক্লিক করুন।

File Explorer এর মাধ্যমে OneDrive এর ফাইল মুভ করা

যখন আপনি কোন ফাইল মুভ করবেন তখন আপনার ফাইল পিসি থেকে মুছে OneDrive এ যোগ হবে। ডান পাশের প্যানেল থেকে ফাইল চেপে ধরে বাম পাশের OneDrive প্যানেলে ছেড়ে দিন।

কোন অ্যাপ্লিকেশন থেকে OneDrive এ ফাইল সংরক্ষণ করা

আপনি আপনার অ্যাপ্লিকেশন থেকে সরাসরি ফাইল OneDrive এ সংরক্ষণ করতে পারেন। আপনি আপনার পিসি সহ OneDrive বা অন্য কোন স্থানে ফাইল সংরক্ষণ পছন্ন করতে পারেন। আপনি কোথায় সংরক্ষণ করতে চান তার স্থান পরিবর্তন করতে OneDrive এর উপরের দিকের বাম প্রান্তের তীর চিহ্নে টোকা বা ক্লিক করতে পারেন (যদি এটি ইতোমধ্যেই নির্বাচন করা না থাকে)।

তারপর OneDrive এর কোন ফোল্ডার এ ফাইল সংরক্ষণ করতে চান তা নির্বাচন করুন, ফাইলের একটি নাম লিখুন এবং তারপর Save এ টোকা দিন বা ক্লিক করুন।

ডেস্কটপ এর কোন অ্যাপ্লিকেশন থেকে OneDrive এ কোন ফাইল সংরক্ষণ করা

যখন আপনি ডেস্কটপ অ্যাপ্লিকেশন ব্যবহার করছেন, যেমন- মাইক্রোসফট অফিস বা পেইন্ট, আপনি এখান থেকেও সরাসরি OneDrive এ ফাইল সংরক্ষণ করতে পারেন। আপনি যে অ্যাপ্লিকেশন ব্যবহার করছেন সেটি থেকে Save এ ক্লিক করুন। এবং তারপর বাম পাশের প্যানেল থেকে OneDrive এ টোকা দিন বা ক্লিক করুন।

তারপর OneDrive এর কোন ফোল্ডার এ ফাইল সংরক্ষণ করতে চান তা নির্বাচন করুন, ফাইলের একটি নাম লিখুন এবং তারপর Save এ টোকা দিন বা ক্লিক করুন।

সয়ংক্রিয়ভাবে OneDrive এ ফাইল সংরক্ষণ করা

অধিকাংশ পিসিতে আপনি যখন মাইক্রোসফট অফিস ফাইল, PDF এবং অন্যান্য ডকুমেন্ট সংরক্ষণ করেন তখন OneDrive প্রস্তাবিত স্থান হিসেবে দেখা যায় (যেমন- ওয়ার্ড ডকুমেন্ট, এক্সেল ওয়ার্কশীট)। আপনার পিসিতে যদি ক্যামেরা সংযুক্ত থাকে, আপনি সয়ংক্রিয়ভাবে ছবি তোলার সাথে সাথে একটি কপি OneDrive এ সংরক্ষণ করে রাখতে পারেন, সুতরাং আপনার সবসময়ই একটি ব্যাকআপ থেকে যাবে। আপনার পিসিতে সয়ংক্রিয়ভাবে সংরক্ষণ সেট করা আছে কিনা তা দেখার জন্য OneDrive এর সেটিংস খুজে দেখুন।

1. সুইপ করে পর্দার ডান প্রান্তে যান, Settings এ টোকা দিন এবং তারপর Change PC settings এ টোকা দিন।
(আপনি যদি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পাশের নিচের দিকে নিয়ে যান, একটু উপরের দিকে উঠুন, Settings এ ক্লিক করুন এবং তারপর Change PC settings এ ক্লিক করুন।)
2. ডকুমেন্ট এর জন্য OneDrive এ টোকা দিন বা ক্লিক করুন এবং তারপর Save documents to OneDrive by default চালু করুন।
3. ছবির এর জন্য OneDrive এ টোকা দিন বা ক্লিক করুন এবং তারপর Upload photos at good quality পছন্দ করুন বা বেশি resolution এর ছবির জন্য Upload photos at best quality পছন্দ করুন।

OneDrive এ আপনার ফাইল এর নিরাপত্তা সম্পর্কিত তথ্যের জন্য দেখুন “OneDrive এ আপনার ফাইল এর নিরাপত্তা”।

টিপস: আপনি OneDrive এ বিনা মূল্যে স্টোরেজ পান, কিন্তু আপনার যদি আরো বেশি স্টোরেজ এর প্রয়োজন হয় তাহলে আপনি তা ক্রয় করতে পারেন। PC settings খুলুন, OneDrive এ টোকা দিন বা ক্লিক করুন এবং তারপর Buy more storage এ টোকা দিন বা ক্লিক করুন।

যেকোন স্থান থেকে আপনার ফাইল দেখা এবং সংগ্রহ করা

যখন আপনার ফাইল OneDrive এ আছে, আপনি যেকোন ডিভাইস থেকে এটি পেতে পারেন, এমনকি আপনার পিসিতে কোন সমস্যা দেখা দিলেও। আপনি OneDrive এর ওয়েব সাইটে যেতে পারেন বা এনড্রয়েড, আইওএস বা উইন্ডোজ ফোনের যেকোন একটি মোবাইল অ্যাপ্লিকেশন ব্যবহার করতে পারেন।

যখন আপনি অফলাইন এ থাকবেন তখন ফাইলগুলো পেতে

উইন্ডোজ 8.1 এবং উইন্ডোজ আরটি 8.1 এ, আপনি যখন ইন্টারনেটের সাথে সংযুক্ত থাকবেন না তখনও আপনার সকল ফাইল ব্রাউজ করতে পারবেন। আপনার যখন ইন্টারনেট কানেকশন থাকবে না তখন যদি আপনি ফাইলগুলো খুলতে এবং সম্পাদনা করতে চান তাহলে আপনাকে ঐ ফাইলগুলো অফলাইনে ব্যবহারযোগ্য করে রাখতে হবে। ফাইলগুলো অফলাইনে ব্যবহারযোগ্য করার জন্য OneDrive অ্যাপ্লিকেশন বা File Explorer ব্যবহার করতে পারেন।

OneDrive অ্যাপ্লিকেশন ব্যবহার করে ফাইলগুলো অফলাইনে ব্যবহারযোগ্য করা

ফাইলটি নির্বাচন করতে সুইপ করে নিচের দিকে যান বা এর উপর ডান-ক্লিক করুন, তারপর Make offline এ টোকা দিন বা ক্লিক করুন। যদি আপনি আপনার পিসিতে খুব বেশী স্থান দখল হয়ে যাওয়া সম্পর্কে উদ্বিগ্ন হন তাহলে কিছু সংখ্যক ফাইলকে অফলাইনে ব্যবহারযোগ্য বানান অথবা যদি কিছু ফাইল অফলাইনে ব্যবহারের কোন প্রয়োজন না হয়, তাহলে এদেরকে online-only হিসেবে পরিবর্তন করুন।

যদি আপনার পিসির space কোন উদ্বেগের বিষয় না হয়, তাহলে আপনি আপনার সম্পূর্ণ OneDrive অফলাইনে ব্যবহারযোগ্য করে রাখতে পারেন:

File Explorer ব্যবহার করে ফাইলগুলোকে অফলাইনে ব্যবহারযোগ্য করা

ফাইলের উপর চাপ দিন এবং ধরে রাখুন বা ডান-ক্লিক করুন এবং তারপর Make available offline পছন্দ করুন। আপনার OneDrive অফলাইনে ব্যবহারযোগ্য বানাতে বাম পাশের প্যানেল এ OneDrive এর উপর চাপ দিন এবং ধরে রাখুন বা ডান-ক্লিক করুন এবং তারপর Make available offline পছন্দ করুন।

ফাইল শেয়ারিং

OneDrive এ ফাইল শেয়ার করা এবং হোম নেটওয়ার্ক এ ফাইল শেয়ার করার সেটিং করা প্রায় সাদৃশ্যপূর্ণ, এবং ইমেইল এ ফাইল পাঠানো বা একটি USB ফ্ল্যাশ ড্রাইভ ব্যবহার করা থেকে আরো বেশি সংগঠিত এবং দক্ষ ।

OneDrive অ্যাপ্লিকেশন ব্যবহার করে ফাইল এবং ফোল্ডার শেয়ার করা

1. ফাইল বা ফোল্ডার নির্বাচন করার জন্য সুইপ করে নিচের দিকে যান বা ডান-ক্লিক করুন।
2. Share এ টোকা দিন বা ক্লিক করুন।
3. নির্দিষ্ট ব্যক্তি বা দলের সাথে শেয়ার করার জন্য Invite people পচন্দ করুন। আপনি ব্যক্তিগতভাবে জানেন না এমন প্রচুর সংখ্যক লোকর সাথে শেয়ার করার জন্য Get a link পছন্দ করুন। শেয়ারিং সম্পর্কে আরো বিস্তারিত জানতে দেখুন “OneDrive এ আমি কিভাবে আমার ফাইল এবং ফোল্ডার শেয়ার করতে পারি?”

উইন্ডোজ 8.1

উইন্ডোজ 8.1 টিউটোরিয়াল: পিসিকে নিজের পছন্দ মতো সাজানো (Personalize your PC)

March 17, 2015 Rafiqul Islam

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

উইন্ডোজ 8.1 টিউটোরিয়াল 11 এর 10

আপনার পছন্দসমূহ সমন্বিত করা (Featuring your favorites)

উইন্ডোজ 8.1 এবং উইন্ডোজ আরটি 8.1 দিয়ে বিভিন্নভাবে আপনি আপনার পিসিকে পছন্দের অ্যাপ্লিকেশন, ব্যক্তি, ছবি, রং ইত্যাদি দিয়ে নিজের মতো করে সাজাতে পারেন।

যদি আপনি আপনার পিসিতে মাইক্রোসফট একাউন্ট দিয়ে Sign in করে থাকেন, আপনি যতকিছু দিয়ে আপনার পিসিকে নিজস্বতা দান (personalize) করেছেন তার সবটাই সবসময় আপনার সঙ্গেই থাকবে। আপনি যদি এই একই মাইক্রোসফট একাউন্ট দিয়ে অন্য পিসি বা ডিভাইস এ Sign in করেন, তাহলে আপনার একই ছবি, কন্টাক্ট এবং সেটিংস উক্ত পিসিতে দেখতে পারবেন। এবং যদি অন্য কেউ আপনার পিসি ব্যবহার করে, তারা তাদের নিজেদের মাইক্রোসফট একাউন্ট দিয়ে Sign in করতে পারবে, সুতরাং তারা তাদের পছন্দের অ্যাপ্লিকেশন, ব্যক্তি, ছবি এবং রং দিয়ে নিজের মতো করে পিসিকে সাজাতে পারবে (আপনার কোনকিছু পরিবর্তন না করেও)।

পিকচার পাসওয়ার্ড (Picture Password) ব্যবহার করে Sign in করা

Picture Password এর সাহায্যে, একটি মনে রাখা কষ্টকর পাসওয়ার্ড এর পরিবর্তে আপনার পছন্দের কোন ছবি দিয়ে পিসিতে Sign in করতে পারবেন। আপনি একটি ছবি নির্বাচন করেছেন, যা ইঙ্গিত করে - বৃত্ত, সোজা লাইন, বা ফোটার সমন্ময় - আপনি ব্যবহার করুন এবং ছবিটি যেখানে আছে তা ট্রেস করুন। আপনি একটি Picture Password অঙ্কন করতে পারেন সরাসরি টাচ স্ক্রিণের উপরে আঙ্গুলের সাহায্যে, অথবা আপনি ছবি (কোন আকৃতি) আকার জন্য মাউস ব্যবহার করতে পারেন। আপনার পিসিতে যাদের মাইক্রোসফট একাউন্ট আছে তাদের সবাই তাদের নিজস্ব Picture Password তৈরি করতে পারে।

Picture Password তৈরি করার জন্য

1. সুইপ করে পর্দার ডান প্রান্তে যান, Settings এ টোকা দিন এবং তারপর Change PC settings এ টোকা দিন।
(আপনি যদি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পাশের নিচের দিকে নিয়ে যান, একটু উপরের দিকে উঠুন, Settings এ ক্লিক করুন এবং তারপর Change PC settings এ ক্লিক করুন।)
2. Accounts এ টোকা দিন বা ক্লিক করুন এবং তারপর Sign-in options এ টোকা দিন বা ক্লিক করুন।
3. Picture password এর অধীনে Add এ টোকা দিন বা ক্লিক করুন।
4. আপনার মাইক্রোসফট একাউন্ট এর তথ্য দিয়ে Sign in করুন, এবং তারপর পর্দায় প্রদর্শিত নির্দেশাবলী অনুসরণ করুন।

টিপস: সাধারণ পাসওয়ার্ড এর থেকে Picture Password অনেক বেশি নিরাপদ, কেননা এগুলো অনুমান করা কঠিন।

Sign in করার পর আপনি কোথায় যেতে চান

ডিফল্ট হিসেবে, অধিকাংশ মানুষ যখন তাদের পিসিতে Sign in করে তখন ডেস্কটপ এ যায়, কিন্তু আপনি আপনি যখন আপনার পিসিতে Sign in করবেন তখন Desktop, Start Screen, বা App View এর মধ্যে যেকোনটি পছন্দ করতে পারেন, এক্ষেত্রে আপনি কি ধরনের যন্ত্র (ডিভাইস) ব্যবহার করছেন তা কোন বিবেচ্য বিষয় নয়।

ডেস্কটপ এ বুট করার জন্য

1. প্রথমে, পর্দার ডান পাশে সুইপ করার মাধ্যমে টাস্কবার ও নেভিগেশন প্রোপার্টিজ খুলুন, Search এ টোকা দিন, সার্চ বক্স এ Taskbar লিখুন, এবং তারপর ফলাফল থেকে Taskbar and Navigation এ টোকা দিন বা ক্লিক করুন।

2. Navigation ট্যাব এ টোকা দিন বা ক্লিক করুন এবং তারপর When I sign in or close all apps on a screen, go to the desktop instead of Start চেক বক্স নির্বাচন করুন । OK তে টোকা দিন বা ক্লিক করুন। আপনি যখন পরবর্তীতে পিসি Sign in করবেন তখন ডেস্কটপ দেখা যাবে।

স্টার্ট এ বুট করার জন্য

1. প্রথমে, পর্দার ডান পাশে সুইপ করার মাধ্যমে টাস্কবার ও নেভিগেশন প্রোপার্টিজ খুলুন, Search এ টোকা দিন, সার্চ বক্স এ Taskbar লিখুন, এবং তারপর ফলাফল থেকে Taskbar and Navigation এ টোকা দিন বা ক্লিক করুন।
2. Navigation ট্যাব এ টোকা দিন বা ক্লিক করুন এবং তারপর When I sign in or close all apps on a screen, go to the desktop instead of Start চেক বক্স নির্বাচন উঠিয়ে দিন । OK তে টোকা দিন বা ক্লিক করুন। আপনি যখন পরবর্তীতে পিসি Sign in করবেন তখন ডেস্কটপ এর বদলে Start Screen দেখা যাবে।

একাউন্ট পিকচার পরিবর্তন করার জন্য

আপনার অ্যাকাউন্ট পিকচার আপনার মাইক্রোসফট একাউন্ট এর সাথে সংযুক্ত, সুতরাং আপনি পিসিতে এবং Start Screen এ Sign in করলে উক্ত ছবি দেখতে পারবেন। সেইসাথে আপনার বন্ধু-বান্ধব এবং পরিবার যারা পরিচিত হিসেবে তালিকাভুক্ত আছে (আপনার কন্টাক্ট লিস্ট এ আছে) তারা আপনার ছবি দেখতে পারবে।

অ্যাকাউন্ট পিকচার হিসেবে আপনার নিজের ছবিগুলো থেকে একটি পছন্দের ছবি ব্যবহার করতে পারেন, বা কোন অ্যাপ্লিকেশন এর সাহায্যে ছবি তৈরি বা সম্পাদনা করে ব্যবহার করতে পারেন। এবং যদি আপনার ওয়েব ক্যাম থাকে তাহলে একটি ছবি তুলতে পারেন বা একটি ভিডিও ক্লিপ তৈরি করতে পারেন।

অ্যাকাউন্ট পিকচার পরিবর্তন করার জন্য

1. সুইপ করে পর্দার ডান প্রান্তে যান, Settings এ টোকা দিন এবং তারপর Change PC settings এ টোকা দিন।
(আপনি যদি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পাশের নিচের দিকে নিয়ে যান, একটু উপরের দিকে উঠুন, Settings এ ক্লিক করুন এবং তারপর Change PC settings এ ক্লিক করুন।)
2. Accounts এ টোকা দিন বা ক্লিক করুন এবং তারপর Your account এ টোকা দিন বা ক্লিক করুন
3. নিচের যেকোন একটি পন্থা অনুসরণ করুন:

একটি পছন্দের ছবি খুজে বের করা। যদি আপনি একটি পছন্দের ছবি খুজতে চান তাহলে Browse এ টোকা দিন বা ক্রিক করুন। আপনি আপনার পিসিতে বা অনড্রাইভে ফটো নেভিগেট করতে পারেন। একটি ছবি নির্বাচন করার জন্য টোকা দিন বা ক্লিক করুন, তারপর Choose Image এ টোকা দিন বা ক্লিক করুন।

অ্যাপ্লিকেশন ব্যবহার করে ছবি তৈরি বা সম্পাদনা করা। আপনি যদি ছবি তৈরি বা সম্পাদনা করার জন্য কোন অ্যাপ্লিকেশন ব্যবহার করতে চান, আপনি যে অ্যাপ্লিকেশনটি ব্যবহার করতে চান তার উপর টোকা দিন বা ক্লিক করুন, তারপর পর্দায় প্রদর্শিত নির্দেশনা অনুসরন করুন। আপনার পিসিতে ইনস্টল করা ছবি সম্পাদনা করা যায় এমন সকল অ্যাপ্লিকেশন এর তালিকা এখানে দেখা যাবে। আপনি যে অ্যাপ্লিকেশনটি ব্যবহার করতে চান তা যদি এখানে দেখা না যায় তাহলে কিভাবে একটি সংগ্রহ করবেন তা জানতে দেখুন “পিসির জন্য অ্যাপ্লিকেশন সংগ্রহ”।

একটি ছবি তোলা বা একটি ভিডিও ক্লিপ তৈরি করা। যদি আপনি একটি ছবি তুলতে চান বা একটি ভিডিও ক্লিপ তৈরি করতে চান তাহলে Camera এ টোকা দিন বা ক্লিক করুন। তারপর একটি ছবি তুলুন বা ভিডিও ক্লিপ তৈরি করার জন্য video mode এ সুইচ করুন।

স্টার্টকে নিজের পছন্দ অনুসারে সাজানো

আপনি Start Screen এ টাইলস, রং এবং ছবি বাছাই করতে পারেন এবং আপনার অ্যাপ্লিকেশনগুলো সাজাতে পারেন। যদি অন্যেরা আপনার পিসি ব্যবহার করে, তাহলে নিশ্চিত হয়ে নিন যে তারা সকলে তাদের নিজেদের মাইক্রোসফট একাউন্ট ব্যবহার করে কিনা। এভাবে তারা প্রত্যেকের তাদের নিজস্ব কাস্টমাইজড Start Screen থাকতে পারে। আরো জানতে দেখুন “স্টার্ট স্ক্রিণ”।

ব্যাকগ্রাউন্ড পরিবর্তন করার জন্য

1. স্টার্ট খোলার জন্য সুইপ করে পর্দার ডান প্রান্তের দিকে যান এবং তারপর Start এ টোকা দিন।
2. সুইপ করে পর্দার ডান প্রান্তের দিকে যান এবং তারপর Settings এ টোকা দিন।
3. Personalize এ টোকা দিন বা ক্লিক করুন এবং তারপর background, background Colour এ টোকা দিন বা ক্লিক করুন, ব্যাকগ্রাউন্ড কালার, এবং আপনার প্রয়োজন অনুসারে রঙ অ্যাকসেন্ট করুন। ব্যাকগ্রাউন্ড কালার এবং আপনি যে রঙ অ্যাকসেন্ট করেছেন তা অন্য কিছু জায়গাতেও দেখা যাবে, যেমন- চার্ম এবং সাইন ইন স্ক্রিণ।

স্টার্ট এ ডেস্কটপ ব্যাকগ্রাউন্ড দেখার জন্য

আপনি ডেস্কটপ ব্যাকগ্রাইন্ড পিকচার কে Start Screen এর ব্যাকগ্রাউন্ড হিসেবেও ব্যবহার করতে পারেন। যখন ডেস্কটপ ব্যাকগ্রাউন্ড পরিবর্তন করা হবে তখন স্টার্টও সয়ংক্রিয়ভাবে আপডেট হবে।

1. স্টার্ট খোলার জন্য সুইপ করে পর্দার ডান প্রান্তের দিকে যান এবং তারপর Start এ টোকা দিন।
2. সুইপ করে পর্দার ডান প্রান্তের দিকে যান এবং তারপর Settings এ টোকা দিন।
3. Personalize এ টোকা দিন বা ক্লিক করুন এবং তারপর আপনার ডেস্কটপ ব্যাকগ্রাউন্ড এর প্রিভিউ থেকে আপনার পছন্দমত একটিকে টোকা দিন বা ক্লিক করুন।

যেসকল অ্যাপলিকেশন আপনি প্রায়ই ব্যবহার করেন সেগুলোকে পিন করে রাখা

দ্রুততার সাথে খোলার জন্য আপনি আপনার পছন্দের অ্যাপলিকেশনগুলোকে Start Screen বা টাস্কবার এর সাথে পিন করে রাখতে পারেন এবং টাইলস এ এক নজরে আপডেটগুলো দেখতে পারেন।

ধাপ 1 App View দেখার জন্য আপনার হাতের আঙুলের সাহায্যে Start Screen এর মাঝ বরাবর থেকে উপরের দিকে স্লাইড করুন অথবা Start Screen এর নিচের দিকে বাম পাশের অ্যারো এ ক্লিক করুন।

ধাপ 2 যে অ্যাপলিকেশন কে পিন করতে চান তার উপর চাপ দিন বা ধরে রাখুন বা রাইট ক্লিক করুন। আপনি একাধিক অ্যাপলিকেশন বাছাই করতে পারেন এবং সবগুলোকে একই সাথে পিন করতে পারেন।

ধাপ 3 টোকা দিন বা ক্লিক করুন Pin to Start অথবা Pin to taskbar এর উপর। যে অ্যাপলিকেশনগুলো পিন করেছেন তা Start Screen এর শেষে বা ডেস্কটপ টাস্কবারে দেখা যাবে।

স্টার্ট থেকে অ্যাপলিকেশন আনপিন করা

আপনি যদি সিদ্ধান্ত নিয়ে থাকেন যে আপনার Start Screen এ একটি টাইল আর থাকবে না, আপনি একে স্টার্ট থেকে আনপিন করতে পারেন। অ্যাপলিকেশন আনপিন করা, অ্যাপলিকেশন আনইনস্টল করা থেকে ভিন্নতর - যদি আপনি একটি অ্যাপলিকেশন কে Start Screen থেকে আনপিন করেন, অ্যাপলিকেশনটি সার্চ করলে (খোজা হলে) তখনও দেখা যাবে এবং এটি অ্যাপলিকেশন ভিউ এও দেখা যাবে।

স্টার্ট থেকে একটি অ্যাপ আনপিন করা

1. শুরুর পর্দায় যে টাইলস কে আনপিন করতে চান তার উপর চাপ দিন বা ধরে রাখুন বা রাইট ক্লিক করুন।
আপনি একাধিক অ্যাপলিকেশন বাছাই করতে পারেন এবং সবগুলোকে একই সাথে আনপিন করতে পারেন। আপনার নির্বাচন বাদ দেওয়ার জন্য Start Screen এর উপর অথবা App View ফাঁকা এর স্থানে এ টোকা দিন বা ক্লিক করুন, অথবা Customize এ টোকা দিন বা ক্লিক করুণ।

2. Unpin from Start এ টোকা দিন বা ক্লিক করুন।
আপনি যে অ্যাপ্লিকেশনগুলোকে বাছাই করেছিলেন তা Start Screen থেকে মুছে যাবে, কিন্তু তখনও App View এ দেখা যাবে এবং সার্চ (খোঁজা হলে) করলে পাওয়া যাবে।

Start Screen এর একটি টাইল সরাতে
1। শুরুর পর্দায় যে টাইলস কে সরাতে চান তার উপর চাপ দিন বা ক্লিক করুন এবং ধরে রাখুন।
2। যেখানে এটিকে রাখতে চান সেখানে এটিকে টেনে নিয়ে যান।

টাইলস কে ছোট বড় করা
1। শুরুর পর্দায় যে টাইলস কে ছোট বড় করতে চান তার উপর চাপ দিন বা ক্লিক করুন এবং ধরে রাখুন।
2। Resize এ টোকা দিন বা ক্লিক করুন।
3। আপনার চাহিদামত সাইজ পছন্দ করুন।

আপনার লক স্ক্রিন কাস্টমাইজ করা

Lock Screen হচ্ছে এমন একটি স্ক্রিণ যা আপনার পিসিকে যখন লক (তালাবদ্ধ) করবেন তখন দেখতে পারবেন (অথবা কিছু সময় পিসি ব্যবহার না করার ফলে যখন এটি সয়ংক্রিয়ভাবে লক হয়ে যাবে)। আপনি আপনার পছন্দের বাচ্চাদের, পোষা প্রাণী, এবং অবকাশ উৎযাপনের ছবি, বা এমনকি একটি আবর্তিত স্লাইড শো তৈরি করে সংযুক্ত করতে পারেন।

যদি আপনি কিছু বিনামূল্যে প্রাপ্ত ছবি ব্যবহার করতে চান, তাহলে Personalization Gallery থেকে ছবি ডাউনলোড করতে পারেন।

Lock Screen এ ছবি যোগ করতে

1. সুইপ করে পর্দার ডান প্রান্তে যান, Settings এ টোকা দিন এবং তারপর Change PC settings এ টোকা দিন।
(আপনি যদি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পাশের নিচের দিকে নিয়ে যান, একটু উপরের দিকে উঠুন, Settings এ ক্লিক করুন এবং তারপর Change PC settings এ ক্লিক করুন।)
2. PC and devices এ টোকা দিন বা ক্লিক করুন এবং তারপর Lock screen এ টোকা দিন বা ক্লিক করুন।
3. যদি আপনি শুধুমাত্র একটি ছবিকে Lock Screen এ ব্যবহার করতে চান তাহলে Browse এ টোকা দিন বা ক্লিক করুন এবং তারপর আপনার চাহিদামত ছবি পছন্দ করুন (আপনি আপনার পিসি বা অনড্রাইভ থেকে ছবি পছন্দ করতে পারেন)।
4. যদি আপনি একটি স্লাইড শো কে আপনার পিসির Lock Screen এ দেখতে চান তাহলে এটি চালু করার জন্য Play a slide show on the lock screen টোকা দিন বা ক্লিক করুন।
5. Add a folder এ টোকা দিন বা ক্লিক করুন এবং আপনার পিসি বা অনড্রাইভ এ একটি ফোল্ডার কে ব্রাউজ করুন।
6. এটি নির্বাচন করার জন্য ফোল্ডারটির উপর টোকা দিন বা ক্লিক করুন এবং OK তে টোকা দিন বা ক্লিক করুন। আপনি দশটি পর্যন্ত ফোল্ডার নির্বাচন করতে পারবেন।

Lock Screen এর নিচে অ্যাপ্লিকেশন আনার জন্য

Lock Screen এর নিচে স্থাপনের জন্য আপনি কিছু সংখ্যক অ্যাপ পছন্দ করতে পারেন যাতে আপনি পিসি লক থাকা সত্ত্বেও আপনার পিসিতে কি ঘটছে তা দেখতে পারেন।

1. সুইপ করে পর্দার ডান প্রান্তে যান, Settings এ টোকা দিন এবং তারপর Change PC settings এ টোকা দিন।
(আপনি যদি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পাশের নিচের দিকে নিয়ে যান, একটু উপরের দিকে উঠুন, Settings এ ক্লিক করুন এবং তারপর Change PC settings এ ক্লিক করুন।)
2. PC and devices এ টোকা দিন বা ক্লিক করুন এবং তারপর Lock screen এ টোকা দিন বা ক্লিক করুন।
3. Lock screen apps এ মধ্যে plus button এ টোকা দিন বা ক্লিক করুন। তারপর তালিকা হতে নির্বাচনের জন্য একটি অ্যাপ এ টোকা দিন বা ক্লিক করুন।

Lock Screen এ কোন অ্যাপ্লিকেশনের বিস্তারিত তথ্য দেখার জন্য

Lock Screen এ আপনি একটি অ্যাপ নিতে পারেন যাতে Lock Screen এ অবস্থান করেও কোন বিষয় সম্পর্কে বিস্তারিত তথ্য পেতে পারেন যেমন- আপনার ক্যালেন্ডারের পরবর্তী অ্যাপয়েন্টমেন্ট বা স্কাইপিতে কে আপনাকে কল করছে তা জানতে পারেন।

1. সুইপ করে পর্দার ডান প্রান্তে যান, Settings এ টোকা দিন এবং তারপর Change PC settings এ টোকা দিন।
(আপনি যদি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পাশের নিচের দিকে নিয়ে যান, একটু উপরের দিকে উঠুন, Settings এ ক্লিক করুন এবং তারপর Change PC settings এ ক্লিক করুন।)
2. PC and devices এ টোকা দিন বা ক্লিক করুন এবং তারপর Lock screen এ টোকা দিন বা ক্লিক করুন।
3. Choose an app to display detailed status এর অধীন plus button এ টোকা দিন বা ক্লিক করুন। তারপর তালিকা হতে নির্বাচনের জন্য একটি অ্যাপ এ টোকা দিন বা ক্লিক করুন।

টিপস: ডিফল্ট হিসেবে উইন্ডোজ সেইসকল ছবি লক স্কিণের স্লাইড শো এ ব্যবহার করে যেগুলো পর্দার সাথে ভালভাবে ফিট হয়। কিন্তু যদি আপনি আপনার নির্বাচিত ফোল্ডার এর সকল ছবি স্লাইড শো এ ব্যবহার করতে চান তাহলে Only use the pictures that will fit best on my screen এ টোকা দিন বা ক্লিক করুন।

আপনার সেটিংস সিঙ্ক (Sync) করা।

যদি আপনি একটি মাইক্রোসফট একাউন্ট ব্যবহার করতে থাকেন, আপনি আপনার lock screen এর ছবি, Start screen এবং themes সিঙ্ক করতে পারবেন। এভাবে আপনি যখন অন্য পিসি বা ডিভাইস এ Sign in করবেন, তখন আপনার ব্যক্তিগতকৃত (personalized) সব কিছুই সেখানে দেখতে পারবেন।

সেটিংস সিঙ্ক (Sync) করতে

1. সুইপ করে পর্দার ডান প্রান্তে যান, Settings এ টোকা দিন এবং তারপর Change PC settings এ টোকা দিন।
(আপনি যদি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পাশের নিচের দিকে নিয়ে যান, একটু উপরের দিকে উঠুন, Settings এ ক্লিক করুন এবং তারপর Change PC settings এ ক্লিক করুন।)
2. OneDrive এ টোকা দিন বা ক্লিক করুন এবং তারপর Sync settings এ টোকা দিন বা ক্লিক করুন।
3. এটি অন করতে Sync your settings on this PC এ টোকা দিন বা ক্লিক করুন।
4. Personalization settings এর অধীনে আপনি যেভাবে সিঙ্ক করতে চান সেভাবে সেটিংস পছন্দ করুন।

নোট: আপনি সেখানে Sign in করেছেন সেখানকার Start Screen এ আপনার সকল অ্যাপ্লিকেশন এর টাইলস দেখতে পারবেন। কিন্তু একটি অ্যাপ্লিকেশন অন্য ডিভাইস এ ব্যবহার করার জন্য উক্ত ডিবাইস এ অ্যাপ্লিকেশনটি ইনস্টল করতে হবে।। আরো জানার জন্য দেখুন “একাধিক পিসিতে অ্যাপ্লিকেশন ইন্সটল করার জন্য মাইক্রোসফট একাউন্ট ব্যবহার করুন”।

ডেস্কটপ কাস্টমাইজ করা

ডেস্কটপ কাস্টমাইজ করতে আপনি থিম, ডেস্কটপ ব্যাকগ্রাউন্ড, উইন্ডো কালারস এবং স্ক্রিণ সেভার ব্যবহার করতে পারেন। আপনি বিনামূল্যে কিছু থিম এবং ডেস্কটপ ব্যাকগ্রাউন্ড ব্যবহার করতে চান তাহলে Personalization Gallery এ বিশাল সংখ্যয় এগুলো পাবেন। ডেস্কটপ ব্যক্তিগতকৃতকরণ সম্পর্কে আরো বিস্তারিত জানতে দেখুন Get started with themes.

প্রকল্প নিয়ন্ত্রণ । Project Management (PMP) Basics

Random Short Notes on Project Management (PMI)

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

ব্যবস্থাপনার উপর কিছু সংক্ষিপ্ত নোটঃ
রিদওয়ান বিন শামীম

প্রকল্পের সুযোগ ব্যবস্থাপনার পরিকল্পনাঃ

সুযোগ ব্যবস্থাপনার পরিকল্পনা হল মূলত নির্দিষ্ট করে কীভাবে প্রকল্পের সম্ভাব্য সুযোগের বিভিন্ন উত্থান পতনগুলো নিয়ন্ত্রণ করা যায় ও কীভাবে সুযোগের ক্ষেত্র গুলো নির্ধারণ করা যায়।এজন্যপ্রথমেই যা করতে হবে তা হল প্রকল্প শুরু করা।

একটি প্রকল্প শুরু করাঃ

একটি প্রকল্প শুরু করার সাথে মূলত দুই ধরণের উপাত্ত জড়িত থাকে, প্রথমটি হল প্রকল্পের কিছু নির্দিষ্ট বৈশিষ্ট্য গড়ে তোলা এবং দ্বিতীয়টি হল সম্ভাব্য প্রাথমিক সুযোগগুলোর একটি খসড়া গঠন করা।প্রকল্প ব্যবস্থাপকদের এক্ষেত্রে সরাসরি ও সততার সাথে আচরণ করতে হয়। যেকোনো পরিস্থিতিতে কোন সমস্যা এলে তাকে সোজাসুজি সেই সমস্যা মোকাবেলা করতে হয়। প্রকল্পের বৈশিষ্ট্য, যা অফিসিয়ালি একটি প্রকল্পের ভিত্তি, সেগুলো ব্যবসায়িক চাহিদা মেনে গঠন করতে হয়, সবসময় মাথায় রাখতে হয়, কেন প্রকল্পটি করা হচ্ছে অর্থাৎ প্রকল্পটির উদ্দেশ্য কি। সুযোগের খসড়া হয়ে যাওয়ার পর ও টিমের কর্মীদের কাজ শুরু হয়ে যাওয়ার পর সাধারণত প্রকল্পের যে ধারাটি শুরু করতে হয় তা হল ডবলুবিএস প্রসেস (WBS process) যা মূলত কাজের খণ্ডিত অংশগুলোর আউটপুট বা ফলাফল নির্ধারণ করে। এই আউটপুট গুলো কয়েকটি বিষয়ের সমন্বয়ে হয়ে থাকেঃ মূল্যবান সাংগঠনিক প্রক্রিয়া, প্রকল্পবিধি ও প্রাথমিক সুযোগগুলোর খসড়া ইত্যাদি।

প্রকল্পের কর্ম প্রণালীর নিষ্ঠার ক্ষেত্রে প্রকল্প ব্যবস্থাপককে সব সময় খেয়াল রাখতে হয় সমস্যা সমাধান ও সিদ্ধান্ত গ্রহনের দিকে। সমস্যা সমাধান ও সিদ্ধান্ত গ্রহনের এই বিষয়গুলো ব্যবস্থাপককে একা দেখতে হয়, এগুলো টিম ওয়ার্ক নয়। এবিষয়ে কাজের ধারার বিবরণী পাওয়া যাবে ডবলুবিএস ডিকশনারিতে(in WBS dictionary)। সুযোগের গুরুত্ব নিশ্চিতকরণ হল এমন একটি প্রক্রিয়া যেখানে ক্রেতা ও অর্থ বিনিয়োগকারী যাচাই করতে চায় চূড়ান্তভাবে প্রাপ্ত পণ্য পূর্বের ধারণা করা পণ্যের মানের মতন হয়েছে কিনা।স্টেটমেন্ট অফ ওয়ার্ক বা কাজের বিবৃতিঃ স্টেটমেন্ট অফ ওয়ার্ক বা কাজের বিবৃতি প্রকল্পের খণ্ডিত অংশের বিবরণ দেয় যাতে অনেক সময় বাইরের বিক্রেতাদের অনেক বিষয়ও জড়িত থাকে।কোড অফ কন্ডাক্টের শর্তে প্রকল্প ব্যবস্থাপনার সাথে সংশ্লিষ্ট ব্যক্তিদের আরও বলা থাকে প্রকল্পের লাভ বা লভ্যাংশ নিয়ে যেকোনো ধরণের কোন্দল এড়িয়ে চলতে।

ডবলুবিএস সার্ভের উদ্দেশ্যঃ

ডবলুবিএস সার্ভে পুরো বিষয়টি চূড়ান্ত ভাবে খতিয়ে দেখে, এই ডবলুবিএস সার্ভের কয়েকটি উদ্দেশ্য আছে। সেগুলো হলঃ পূর্বে নিরুপিত সম্ভাব্যতা কতটুকু নির্ভুল তা জানা, নিয়ম নিষ্ঠা ও দায়িত্ববোধ মেনে চলাকে সহজ করা, প্রকল্পের সফলতার একটি মানদণ্ড তৈরি করা ইত্যাদি। এভাবেই প্রকল্প ব্যবস্থাপনার কাজ এগিয়ে চলে।
তথ্যসুত্রঃ (Andy Crowe, the PMP Exam.)

পি এইচ পি টিউটোরিয়াল । PHP tutorial

পিএইচপি ৫ কন্সট্যান্ট (PHP 5 Constants)

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আক্তারুজ্জামান
Department of CSE,University of Chittagong

কনস্টান্ট হচ্ছে এমন একটি identifier যেইটা ভেরিয়েবলের মতই কাজ করে তবে ডিফারেন্স হচ্ছে ভেরিয়েবলের মান বিভিন্ন সময় বিভিন্ন রকম হয় কিন্তু কনস্টান্ট একবার ডিফাইন করা হলে পুরো স্ক্রিপ্টে আর পরিবর্তন হয় না।

একটি ভ্যালিড কনস্টান্টের নাম আরম্ভ করতে হয় লেটার অথবা আন্ডারস্কোর ক্যারেক্টার দিয়ে। এক্ষেত্রে মনে রাখা জরুরি যে কনস্টান্টের নামের আগে কোন $ সাইন ব্যাবহার করা হয় না। প্রচলিত নিয়ম অনুযায়ী কনস্টান্ট লিখতে হয় আপারকেস লেটার দিয়ে।
একটি কনস্টান্ট বানানোর জন্য পিএইচপির define() ফাংশন ব্যাবহার করা হয়। নিচে উদাহরণ দিয়ে বিষয়টি বোজানো হয়েছে।

define() ফাংশনটি দেখতে নিচের মত

define(name, value, case-insensitivity)

প্যারামিটারগুলুর বর্ণনা নিচে দেওয়া হল

name: এইটি কনস্টান্টের নামে নির্দেশ করে।
value: এইটি কনস্টান্টের মান নির্দেশ করে।

case-insensitivity

এইটি নির্দেশ করে কনস্টান্টের মান কেস সেনসিটিভ কিনা। এইটা ডিফল্ট হিসেবে false থাকে।
উদাহরণ

< ?php
 define("GREETING", "Welcome to PHP!");
 echo GREETING;
 ?>

এই কোডটি GREETING নামের একটি কন্সটান্ট তৈরি করে যার মান হচ্ছে “Welcome to PHP!”।
কনস্টান্ট অটোমেটিক্যালি গ্লূবাল অর্থাৎ এইটি পুরো স্ক্রিপ্টে ব্যাবহার করা যেতে পারে। নিচে একটি উদাহরণ দিয়ে বিষয়টি বোঝানো হয়েছে।

 < ?php
 define("GREETING", "Welcome to PHP!");

function showGreeting() {
 echo GREETING;
 }

showGreeting();
 ?>

উপরের উদাহরণে GREETING কনস্টান্টটি showGreeting() ফাংশনের বাইরে সংজ্ঞায়িত করার পরেও, ফাংশনের ভিতরে এইটি ব্যবহার করা যাচ্ছে।

এইচটিএমএল HTML

এইচটিএমএল শিরোনাম (HTML Headings)

March 17, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML Headings

HTML Documents এর ক্ষেত্রে Headings খুবই গুরুত্বপূর্ণ। <h1> থেকে <h6> tags দ্বারা Heading কে তুলে ধরা হয়।

<h1> tag দ্বারা সবচেয়ে গুরুত্বপূর্ণ ও <h6> tag দ্বারা অপেক্ষাকৃত কম গুরুত্বপূর্ণ Heading কে তুলে ধরা হয়।

উদাহরণস্বরূপঃ

<h1> এই হল একটি শিরোনাম </h1>

<h2> এই হল একটি শিরোনাম </h2>

<h3> এই হল একটি শিরোনাম </h3>

<h4> এই হল একটি শিরোনাম </h4>

<h5> এই হল একটি শিরোনাম </h5>

<h6> এই হল একটি শিরোনাম </h6>

ফলাফল:

এই হল একটি শিরোনাম

বিশেষ দ্রষ্টব্যঃ প্রত্যেক Heading এর আগে ও পরে browser স্বয়ংক্রিয়ভাবে কিছু empty space যোগ করে দেয়।

শিরোনাম (Heading) খুব গুরুত্বপূর্ণ

HTML Headings কে কেবল Heading এর জন্য ব্যবহার করতে হবে, কোন Text কে বড় (big) অথবা Bold করার জন্য Heading কে ব্যবহার করা যাবে না। আপনার web page গুলোর structure এবং content এর সূচি বানানোর জন্য সার্চিঞ্জিনগুলো আপনার headings কে ব্যবহার করে। User রা Heading এর দ্বারা আপনার web page এর সারমর্ম বুঝে নেয়। Document এর structure দেখানোর জন্যও Heading ব্যবহার করা গুরুত্বপূর্ণ। <h1> Heading হল প্রধান শিরোনাম, <h2> অপেক্ষাকৃত গৌন, <h3> তার চেয়ে কম গুরুত্বপূর্ণ এভাবেই ক্রমান্বয়ে ব্যবহৃত হয়।

HTML Horizontal Rules (আনুভূমিক নিয়ম)

HTML page এ <hr> tag আনুভূমিক রেখা তৈরি করে। বিষয়বস্তুকে চিহ্নিত করার জন্য <hr > element ব্যবহার করা হয়।

যেমনঃ

<!DOCTYPE html>
<html>
<body>

<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

</body>
</html>

ফলাফল

↓

The hr tag defines a horizontal rule:

This is a paragraph.

↑

HTML এর <head> element

HTML এর <head> element টির HTML Headings এর সাথে কিছু করার নেই। <head> element meta data ধারণ করে। আর meta data web page এ দৃশ্যায়িত হয় না। <html> tag ও <body> tag এর মধ্যখানে HTML element অবস্থান করে।

উদাহরণস্বরূপঃ

<!DOCTYPE html>
<html>

<head>

<title>My First HTML</title>
<meta charset="UTF-8">

</head>

<body>

<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>

</body>
</html>

ফলাফল

The HTML head element contains meta data.

Meta data is data about the HTML document.

HTML এর title element

HTML এর title element হল meta data। এটা HTML Documents এর title হিসেবে চিহ্নিত হয়। Document এ title কখনও প্রদর্শিত হয় না।

HTML এর meta element

HTML এর <meta> element ও আরেকটি meta data। HTML Document এর অন্যান্য তথ্য ও চরিত্র সেটকে তুলে ধরতে এটি ব্যবহৃত হয়।

এইচটিএমএল HTML

এইচটিএমএল এট্রিবিউট (HTML Attributes)

March 16, 2015 Author-Check- Article-or-Video Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML Attributes এইচটিএমএল এট্রিবিউট

নয়ন চন্দ্র দত্ত

এট্রিবিউট হচ্ছে ট্যাগ এর বৈশিষ্ট বা মান। এট্রিবিউট এইচটিএমএল উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।

এইচটিএমএল এট্রিবিউট

• এইচটিএমএল এলিমেন্টে বা উপাদানের এট্রিবিউট বা বৈশিষ্ট্যাবলী থাকতে পারে।

• এট্রিবিউট একটি উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।

• এট্রিবিউট সবসময় শুরু ট্যাগ এ উল্লেখ করা হয়।

• এট্রিবিউট নাম/মান জোড়ায় জোড়ায় আসে। যেমনঃ name="value"

lang এট্রিবিউট

ডকুমেন্টের ল্যাংগুয়েজ <html> ট্যাগে declare করা যেতে পারে। ল্যাংগুয়েজ lang এট্রিবিউটে declare করা হয়।

একটি ল্যাংগুয়েজ declare করা বিশেষ ব্যবহারকারীদের জন্য ( accessibility) তৈরি অ্যাপ্লিকেশন( স্ক্রিন রিডার ) এবং সার্চ ইঞ্জিন এর জন্য খুব গুরুত্বপূর্ণ।

উদাহরণঃ

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

প্রথম দুটি অক্ষর ভাষা নির্ধারণ করে (en) । যদি উপভাষা থাকে, তবে আরো দুটি অক্ষর (US) ব্যবহার করুন।

Title Attribute শিরোনাম অ্যাট্রিবিউট

এইচটিএমএল অনুচ্ছেদ <p> ট্যাগ দিয়ে নির্দেশিত হয়। এই উদাহরণে, <p> এলিমেন্ট এর একটি টাইটেল অ্যাট্রিবিউট আছে। টাইটেল অ্যাট্রিবিউটের মান হচ্ছে "About bangla learning school" ।

উদাহরণঃ

<p title="About bangla learning school">
salearningschoolis a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

ফলাফল

salearningschool is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.

[আপনি যখন element এর উপর দিয়ে মাউসকে move করাবেন তখন টাইটেল একটি tooltip হিসাবে প্রদর্শন করবে। ]

href অ্যাট্রিবিউট

এইচটিএমএল লিঙ্ক <a> ট্যাগ দিয়ে নির্ধারিত। লিঙ্ক এড্রেস href অ্যাট্রিবিউটে উল্লেখ করা হয়।

যেমনঃ-

ফলাফল

This is a link

আপনারা লিঙ্ক এবং <a> ট্যাগ সম্পর্কে এই টিউটোরিয়ালে পরবর্তীতে আরো জানতে পারবেন।

Size বা আকার অ্যাট্রিবিউট

এইচটিএমএল ইমেজ <img> ট্যাগ দিয়ে নির্ধারিত। উৎস ফাইলের নাম (src) এবং ইমেজের আকার (width এবং height) সব অ্যাট্রিবিউট হিসেবে নির্দেশিত হয়। যেমনঃ-

ছবির আকার পিক্সেলে উল্লেখ করা হয়েছে। width="960" এর মানে পর্দা 960 পিক্সেল চওড়া।

আপনারা ইমেজ এবং <img> ট্যাগ সম্পর্কে এই টিউটোরিয়ালে পরবর্তীতে আরো জানতে পারবেন।

Alt অ্যাট্রিবিউট

যখন একটি এইচটিএমএল উপাদান প্রদর্শন করা যায় না তখন Alt অ্যাট্রিবিউট নির্দিষ্ট একটি বিকল্প টেক্সট ব্যবহার করতে সাহায্য করে। "screen readers" দ্বারা অ্যাট্রিবিউটের মান পড়া যায়।

উদাহরণঃ

ফলাফল

salearningschool.com

আমার সুপারিশ: সর্বদা ছোট হাতের অক্ষর ব্যবহার করবেন।

এইচটিএমএল ৫ স্ট্যান্ডার্ড এর ছোট হাতের অ্যাট্রিবিউট নাম প্রয়োজন হয় না। টাইটেল অ্যাট্রিবিউট ছোট বা বড় হাতের লেখা যেতে পারে, যেমন- Title বা TITLE ।

ছোট হাতের সবচেয়ে কমন এবং ছোট হাতের অক্ষর লেখাও সহজ।

আমার সুপারিশ : সর্বদা Quote Attribute মান ব্যবহার করবেন।

এইচটিএমএল ৫ স্ট্যান্ডার্ড এ অ্যাট্রিবিউট মান এ Quote দেওয়ার প্রয়োজন হয় না। উপরে প্রদর্শিত href অ্যাট্রিবিউট, এভাবেও লেখা যেতে পারেঃ

এইচটিএমএল 4 Quote ব্যবহারের বিশেষ পরামর্শ দেওয়া হচ্ছে এবং এক্সএইচটিএমএল (XHTML) এর মত ডকুমেন্ট Quote ব্যবহারের দাবি রাখে।

[quote এর ব্যবহার করাটা খুবই সাধারণ ব্যাপার। quotes বাদ দিয়ে লিখলে ত্রুটি তৈরী হতে পারে। ]

সিঙ্গেল বা ডাবল quote ?

ডাবল quote এর ব্যবহার এইচটিএমএল এ খুবই সাধারণ, কিন্তু একক quote ও ব্যবহার করা যেতে পারে।

অনেকসময়, যখন অ্যাট্রিবিউট মান নিজেই ডাবল quotes (উদ্ধৃতি চিহ্ন) ধারণ করে তখন একক সিঙ্গেল quotes (উদ্ধৃতি চিহ্ন) ব্যবহার করা প্রয়োজন হয়ে পরে।

যেমনঃ-

বা উলটাভাবে

অধ্যাযয়ের সারমর্ম

১। সমস্ত এইচটিএমএল উপাদানের অ্যাট্রিবিউট থাকতে পারে।

২। এইচটিএমএল টাইটেল অ্যাট্রিবিউট অতিরিক্ত "টুল - টিপ" তথ্য প্রদান করে।

৩। এইচটিএমএল href অ্যাট্রিবিউট লিঙ্কের জন্য ঠিকানা ও তথ্য প্রদান করে।

৪। এইচটিএমএল width এবং height অ্যাট্রিবিউটন ইমেজের জন্য আকার বিষয়ক তথ্য প্রদান করে।

৫। এইচটিএমএল Alt অ্যাট্রিবিউট পাঠকদের জন্য টেক্সট প্রদান করে।

৬। এইচটিএমএল এট্রিবিউট নামে সবসময় ছোট হাতের অক্ষর ব্যবহার করা ভাল।

৭। quote এট্রিবিউট এ সবসময় ডাবল quote ব্যবহার করা ভাল।

এইচটিএমএল এট্রিবিউট

নীচে এইচটিএমএল এ প্রায়ই ব্যবহৃত হয় এমন কিছু এট্রিবিউট এর একটি বর্ণানুক্রমিক তালিকা দেওয়া হল:

এট্রিবিউটঃ alt
ব্যাখ্যাঃ ইমেজের জন্য একটি বিকল্প টেক্সট উল্লেখ করে

এট্রিবিউটঃ disabled
ব্যাখ্যাঃ একটি ইনপুট উপাদান নিষ্ক্রিয় করা হবে উল্লেখ করে

এট্রিবিউটঃ href
ব্যাখ্যাঃ লিঙ্ক এর জন্য URL (ওয়েব ঠিকানা) উল্লেখ করে

এট্রিবিউটঃ id
ব্যাখ্যাঃ একটি উপাদানের জন্য একটি unique আইডি উল্লেখ করে

এট্রিবিউটঃ src
ব্যাখ্যাঃ ইমেজের জন্য URL (ওয়েব ঠিকানা) উল্লেখ করে

এট্রিবিউটঃ style
ব্যাখ্যাঃ একটি উপাদানের জন্য ইনলাইন সিএসএস স্টাইল উল্লেখ করে

এট্রিবিউটঃ title
ব্যাখ্যাঃ একটি উপাদান সম্পর্কে ( টুল টিপ হিসেবে প্রদর্শিত) অতিরিক্ত তথ্য উল্লেখ করে

এট্রিবিউটঃ value
ব্যাখ্যাঃ ইনপুট উপাদানের জন্য মান ( টেক্সট কন্টেন্ট ) উল্লেখ করে করে

মঙ্গ ডি বি । MongoDB

MongoDB Java

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Done By Raju(DU)

MongoDB Java

Installation পদ্ধতিঃ

Java program এ MongoDB ব্যাবহার করার পূর্বে আমাদেরকে নিশ্চিত করতে হবে যে MongoDB JDBC
Driver এবং Java আমাদের machine এ পূর্বে থেকেই রয়েছে। আপনি আরও Java tutorial দেখতে পারেন আপনার
machine এ Java installation করার জন্য। এখন দেখবে কিভাবে MongoDB JDBC driver টি আপনার machine
এ setup করবেন।
১। প্রথমে আপনাকে একটি jar ফাইল দরকার পড়বে সেটি mongodb/mongo-java-driver/downloads> Download mongo.jar
থেকে নামিয়ে নিতে হবে এবং নিশ্চিত হতে হবে সেটি যেন নতুন সংস্করণের হয়।
২। আপনাকে অবশ্যই mongo.jar কে আপনার classpath এ সংযুক্ত করতে হবে ।

Connect to database( Database এ Connect করণ)
---------------------------------------------------
Database এ connect করার জন্য আপনাকে database name নির্দিষ্ট করতে হবে, যদি database এর কোন অস্তিত্ব না
থাকে তবে mongodb নিজেই তা তৈরি করে নিবে।

Database এ connect করার কিছু Code নিম্নরুপঃ

import com.mongodb.MongoClient;
import com.mongodb.MongoException;
import com.mongodb.WriteConcern;
import com.mongodb.DB;
import com.mongodb.DBCollection;
import com.mongodb.BasicDBObject;
import com.mongodb.DBObject;
import com.mongodb.DBCursor;
import com.mongodb.ServerAddress;
import java.util.Arrays;

এখন database পরীক্ষা করার জন্য উপরের program টি সঙ্কলন এবং চালানো যাক। আপনার প্রয়োজন মত আপনি
path পরিবর্তন করে নিতে পারেন। আমরা JDBC driver mongo-2.10.1.jar ব্যাবহার করে বর্তমান path টি পাওয়া যায়।

যেমনঃ
$javac MongoDBJDBC.java
$java -classpath ".:mongo-2.10.1.jar" MongoDBJDBC
Connect to database successfully
Authentication: true

যদি আমরা machine টিতে Windows OS ব্যাবহার করি তবে আমরা code কে নিম্নরুপে compile and run করেতে
পারিঃ

$javac MongoDBJDBC.java
$java -classpath ".;mongo-2.10.1.jar" MongoDBJDBC
Connect to database successfully
Authentication: true

এইখানে auth এর Value হবে true, যদি user name এবং password টি নির্দিষ্ট database এর জন্য valid হয়।

Create a collection:(collection তৈরি করন)
-----------------------------
একটি collection তৈরি করার জন্য com.mongodb.DB class এর createCollection( ) পদ্ধতি ব্যাবহার করতে হয়।
Collection তৈরি করার জন্য code গুলি নিম্ন রুপঃ
import com.mongodb.MongoClient;
import com.mongodb.MongoException;
import com.mongodb.WriteConcern;
import com.mongodb.DB;
import com.mongodb.DBCollection;
import com.mongodb.BasicDBObject;
import com.mongodb.DBObject;
import com.mongodb.DBCursor;
import com.mongodb.ServerAddress;
import java.util.Arrays;

যখন program টি compiled and executed হবে তখন এটি নিম্নরূপ ফলাফল দিবে-
Connect to database successfully
Authentication: true
Collection created successfully

Getting/ selecting a collection(collection নির্দিষ্ট করন):
----------------------------------------------------
একটি collection কে database এ নির্দিষ্ট করতে com.mongodb.DBCollection class টির
getCollection() পদ্ধতি ব্যাবহার করা হয়।

Code গুলি নিম্নরূপঃ
import com.mongodb.MongoClient;
import com.mongodb.MongoException;
import com.mongodb.WriteConcern;
import com.mongodb.DB;
import com.mongodb.DBCollection;
import com.mongodb.BasicDBObject;
import com.mongodb.DBObject;
import com.mongodb.DBCursor;
import com.mongodb.ServerAddress;
import java.util.Arrays;

public class MongoDBJDBC{
public static void main( String args[] ){
try{
// To connect to mongodb server
MongoClient mongoClient = new MongoClient( "localhost" , 27017 );
// Now connect to your databases
DB db = mongoClient.getDB( "test" );
System.out.println("Connect to database successfully");
boolean auth = db.authenticate(myUserName, myPassword);
System.out.println("Authentication: "+auth);
DBCollection coll = db.createCollection("mycol");
System.out.println("Collection created successfully");
DBCollection coll = db.getCollection("mycol");
System.out.println("Collection mycol selected successfully");
}catch(Exception e){
System.err.println( e.getClass().getName() + ": " + e.getMessage() );
}
}
}

যখন program টি compiled and executed হবে তখন এটি নিম্নরূপ ফলাফল দিবে-
Connect to database successfully
Authentication: true
Collection created successfully
Collection mycol selected successfully

Insert a document (একটি document প্রবেশ করণ):
-------------------------------------------------
mongodb তে একটি document কে প্রবেশ করাতে com.mongodb.DBCollection class এর
insert() পদ্ধতি ব্যাবহার করা হয়।

public class MongoDBJDBC{
public static void main( String args[] ){
try{
// To connect to mongodb server
MongoClient mongoClient = new MongoClient( "localhost" , 27017 );
// Now connect to your databases
DB db = mongoClient.getDB( "test" );
System.out.println("Connect to database successfully");
boolean auth = db.authenticate(myUserName, myPassword);
System.out.println("Authentication: "+auth);
DBCollection coll = db.getCollection("mycol");
System.out.println("Collection mycol selected successfully");
BasicDBObject doc = new BasicDBObject("title", "MongoDB").
append("description", "database").
append("likes", 100).
append("url", "http://www.tutorialspoint.com/mongodb/").
append("by", "tutorials point");
coll.insert(doc);
System.out.println("Document inserted successfully");
}catch(Exception e){
System.err.println( e.getClass().getName() + ": " + e.getMessage() );
}
}
}

যখন program টি compiled and executed হবে তখন এটি নিম্নরূপ ফলাফল দিবে-

Connect to database successfully
Authentication: true
Collection mycol selected successfully
Document inserted successfully

Retrieve all documents(document এর পুনরুদ্ধার করন):
-----------------------------------------------------
collection এর সকল document কে নির্বাচন করতে com.mongodb.DBCollection class এর
find() পদ্ধতি টি ব্যাবহার করা হয়। এই পদ্ধতি টি cursor কে বদলে দেয়, তাই আপনাকে তা পুনরুদ্ধার
করার প্রয়োজন পরবে।

public class MongoDBJDBC{
public static void main( String args[] ){
try{
// To connect to mongodb server
MongoClient mongoClient = new MongoClient( "localhost" , 27017 );
// Now connect to your databases
DB db = mongoClient.getDB( "test" );
System.out.println("Connect to database successfully");
boolean auth = db.authenticate(myUserName, myPassword);
System.out.println("Authentication: "+auth);
DBCollection coll = db.getCollection("mycol");
System.out.println("Collection mycol selected successfully");
DBCursor cursor = coll.find();
int i=1;
while (cursor.hasNext()) {
System.out.println("Inserted Document: "+i);
System.out.println(cursor.next());
i++;
}
}catch(Exception e){
System.err.println( e.getClass().getName() + ": " + e.getMessage() );
}
}
}

যখন program টি compiled and executed হবে তখন এটি নিম্নরূপ ফলাফল দিবে-

Connect to database successfully
Authentication: true
Collection mycol selected successfully
Inserted Document: 1
{
"_id" : ObjectId(7df78ad8902c),
"title": "MongoDB",
"description": "database",
"likes": 100,
"url": "http://www.tutorialspoint.com/mongodb/",
"by": "tutorials point"
}

Update document( document এর হালনাগাদ):
---------------------------------------------
collection থেকে document কে হালনাগাদ করার জন্য com.mongodb.DBCollection class
এর update() পদ্ধতি ব্যাবহার করা হয়।

Code গুলি নিম্নরূপঃ

public class MongoDBJDBC{
public static void main( String args[] ){
try{
// To connect to mongodb server
MongoClient mongoClient = new MongoClient( "localhost" , 27017 );
// Now connect to your databases
DB db = mongoClient.getDB( "test" );
System.out.println("Connect to database successfully");
boolean auth = db.authenticate(myUserName, myPassword);
System.out.println("Authentication: "+auth);
DBCollection coll = db.getCollection("mycol");
System.out.println("Collection mycol selected successfully");
DBCursor cursor = coll.find();
while (cursor.hasNext()) {
DBObject updateDocument = cursor.next();
updateDocument.put("likes","200")
col1.update(updateDocument);
}
System.out.println("Document updated successfully");
cursor = coll.find();
int i=1;
while (cursor.hasNext()) {
System.out.println("Updated Document: "+i);
System.out.println(cursor.next());
i++;
}
}catch(Exception e){
System.err.println( e.getClass().getName() + ": " + e.getMessage() );
}
}
}

যখন program টি compiled and executed হবে তখন এটি নিম্নরূপ ফলাফল দিবে-

Connect to database successfully
Authentication: true
Collection mycol selected successfully
Document updated successfully
Updated Document: 1
{
"_id" : ObjectId(7df78ad8902c),
"title": "MongoDB",
"description": "database",
"likes": 100,
"url": "http://www.tutorialspoint.com/mongodb/",
"by": "tutorials point"
}

Delete first document( প্রথম document মুছে ফেলা):
--------------------------------------------------
collection থেকে প্রথম document মুছে ফেলার জন্য প্রথমে com.mongodb.DBCollection class
এর findOne() পদ্ধতি এবং পরে remove পদ্ধতি ব্যাবহার করা হয়।

public class MongoDBJDBC{
public static void main( String args[] ){
try{
// To connect to mongodb server
MongoClient mongoClient = new MongoClient( "localhost" , 27017 );
// Now connect to your databases
DB db = mongoClient.getDB( "test" );
System.out.println("Connect to database successfully");
boolean auth = db.authenticate(myUserName, myPassword);
System.out.println("Authentication: "+auth);
DBCollection coll = db.getCollection("mycol");
System.out.println("Collection mycol selected successfully");
DBObject myDoc = coll.findOne();
col1.remove(myDoc);
DBCursor cursor = coll.find();
int i=1;
while (cursor.hasNext()) {
System.out.println("Inserted Document: "+i);
System.out.println(cursor.next());
i++;
}
System.out.println("Document deleted successfully");
}catch(Exception e){
System.err.println( e.getClass().getName() + ": " + e.getMessage() );
}
}
}

যখন program টি compiled and executed হবে তখন এটি নিম্নরূপ ফলাফল দিবে-
Connect to database successfully
Authentication: true
Collection mycol selected successfully
Document deleted successfully

mongodb এর বাকি পদ্ধতি যেমন save(), limit(), skip(), sort() একই ভাবে কাজ করে ।

Root

ইনপুট ও আউটপুট . C – Input & Output

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

ইনপুট ও আউটপুট
আরিফ
প্রোগ্রামে ইনপুট দেয়া হচ্চে প্রগ্রামের মধ্যে নিজের দেয়া ডাটা ঢুকানো। আমরা ফাইল (ফাইল ইনপুট- আউটপুট অংশে আমরা এটা শিখতে পারব) এবং কমান্ড লাইন দুভাবেই ডাটা দিতে পারি । এজন্যে সি এর কিছু বিল্ড-ইন ফাংশন আছে। আর অউটপুট হচ্ছে আমাদের দেয়া ইনপুট ডাটা কম্পিউটার স্ক্রিনে বা প্রিন্টার বা ফাইলের মাঝে দেখানো।
আমরা যদি আমাদের প্রোগ্রামে এমন ব্যবস্থা রাখতে চাই, যাতে কোন দুটি সংখ্যা যোগ করতে হবে সেটি আমরা কোডের ভেতর লিখব না, ব্যবহারকারীর কাছ থেকে ইনপুট আকারে জেনে নেব, তাহলে যে কাজটি করতে হবে সেটাই ইনপুট ডাটা। আর এই ইনপুট ডাটা কম্পিউটার স্ক্রিনে বা প্রিন্টার বা ফাইলের মধ্যে দেখতে পাওয়া হচ্ছে আউটপুট।
এখন আমরা কিছু ইনপুট আউটপুট ফাংশনের সাথে পরিচিত হব।
• getchar & putchar
• scanf & printf
আমরা scanf এবং getchar এই দুটো ফাংশন ব্যাবহার করে ডাটা ইনপুট নিব আর scanf এবং printf এই দুটো ফাংশন দ্বারা আউটপুট এ দেখাব।
উদাহরণঃ
#include <stdio.h>
int main( )
{
char str[100];

printf( "Enter a value :");
gets( str );

printf( "\nYou entered: ");
puts( str );

return 0;
}

এই কোডটিতে char টাইপের str নামের একটি array নেয়া হয়েছে । যখন আমরা কম্পাইল করবো তখন আমাদেরকে ডাটা ইনপুট দেয়ার জন্য বলা হবে যা puts ফাংশন কম্পাইল শেষে কম্পিউটার এ দেখাবে। আমাদের ইনপুট যদি হয় -
this is test
তবে আউটপুট পাবো-
You entered: This is test

নিচের উদাহরণটিও একই কাজ করবে।
#include <stdio.h>
int main( )
{
char str[100];
int i;

printf( "Enter a value :");
scanf("%s %d", str, &i);

printf( "\nYou entered: %s %d ", str, i);

return 0;
}

এখানে scanf ফাংশনটি আগের উদাহরণের gets ফাংশনের মতই ডাটা ইনপুট নিতে ব্যাবহার করা হয়েছে।
এছাড়াও সি – তে আরও অনেক ইনপুট-আউটপুট ফাংশন আছে যেগুলোর সাথে আমরা পরবর্তিতে পরিচিত হব।

মঙ্গ ডি বি । MongoDB

MongoDB সীমাবদ্ধ রেকর্ডস

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

MongoDB সীমাবদ্ধ রেকর্ডস
নয়ন চন্দ্র দত্ত

* Limit() পদ্ধতি
MongoDB তে রেকর্ডকে সীমাবদ্ধ করতে হলে limit() মেথড বা পদ্ধতি ব্যবহার করতে হবে। Limit() পদ্ধতি এক নাম্বারের টাইপ সমর্থন করে যা ডকুমেন্টের নাম্বার এবং আপনি প্রদর্শন করতে চাইছেন।

সিনট্যাক্সঃ
limit() এর বেসিক সিনট্যাক্স নিম্নরূপঃ

>db.COLLECTION_NAME.find().limit(NUMBER)

উদাহরণঃ
নিম্নলিখিত তথ্যের সাথে myycol কালেকশনটি বিবেচনা করুনঃ

{ "_id" : ObjectId(5983548781331adf45ec5), "title":"MongoDB Overview"}
{ "_id" : ObjectId(5983548781331adf45ec6), "title":"NoSQL Overview"}
{ "_id" : ObjectId(5983548781331adf45ec7), "title":"Tutorials Point Overview"}

ডকুমেন্ট quering এর সময় নিচের উদাহরণটি কেবলমাত্র ২টি ডকুমেন্ট প্রদর্শন করবেঃ

>db.mycol.find({},{"title":1,_id:0}).limit(2)
{"title":"MongoDB Overview"}
{"title":"NoSQL Overview"}
>

যদি আপনি Limit() পদ্ধতিতে ডকুমেন্টের নাম্বার উল্লেখ না করেন তাহলে এটি কালেকশনের সকল ডকুমেন্ট প্রদর্শন করবে।

* MongoDB Skip() পদ্ধতি
এছাড়াও limit() পদ্ধতি ছাড়া আরও একটি পদ্ধতি skip() আছে যা ডকুমেন্টের সংখ্যার টাইপ সমর্থন করে এবং সেই নাম্বারের ডকুমেন্ট এড়িয়ে(skip) চলে।

সিনট্যাক্সঃ
skip() এর বেসিক সিনট্যাক্স নিম্নরূপঃ

>db.COLLECTION_NAME.find().limit(NUMBER).skip(NUMBER)

উদাহরণঃ
নিম্নলিখিত উদাহণটি শুধু দ্বিতীয় ডকুমেন্ট প্রদর্শন করবেঃ

>db.mycol.find({},{"title":1,_id:0}).limit(1).skip(1)
{"title":"NoSQL Overview"}
>

অনুগ্রহ করে লক্ষ্য করুন- skip() পদ্ধতিতে ডিফল্ট মান ০ ।

নোড . জে এস । Node.js, ব্লগ । Blog

A Modern Web Dev’s Toolkit . ওয়েব ডেভেলপার দের আধুনিক টুলস

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

A Modern Web Dev's Toolkit . ওয়েব ডেভেলপার দের আধুনিক টুলস

নোড এবং এন পি এমঃ

নোড এনেছে সার্ভার ও ডেস্কটপ জাভা স্ক্রিপ্ট। প্রথমে যদিও জাভা স্ক্রিপ্ট প্রধানত ব্রাউজার এর ভাষার ওপর ভিত্তি করে ব্যবহার করা হত, এখন নোড দ্বারা আপনি আপনার সার্ভার সাইড ব্যাক বা একটি ডেস্কটপ অ্যাপ্লিকেশন তৈরি করতে পারেন আপনার নোড-ওয়েবকিটের সাহায্যে (যারা বেশী উদ্বিগ্ন জন্য)। Node.js® হলো, ক্রোমের জাভাস্ক্রিপ্ট রানটাইম উপর নির্মিত একটি প্ল্যাটফর্ম, যা দ্বারা দ্রুত ও সহজে আকার পরিবর্তনযোগ্য নেটওয়ার্ক অ্যাপ্লিকেশন।

একটি ওয়েব সার্ভার তৈরি করা অত্যন্ত সহজ যদি নিম্নক্ত লাইনগুলো অনুসরণ করা যায়।

var http = require('http');

http.createServer(function (req, res) {

res.writeHead(200, {'Content-Type': 'text/plain'});

res.end('Hello World\n');

}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');

এটি চালানোর জন্য করতে হবে

$ node start

Server running at http://172.0.0.1:1337/

নোড এর অন্নতম একটি বিষয় হলো এর গুরুত্বপূর্ণ কমিউনিটি, যা NPM ডিরেক্টরি, নোড প্যাকেজ ম্যানেজার তৈরি করে এবং তথাকথিত নোড মডিউল প্রকাশ করে। বর্তমানে এ সম্পর্কে 90,000 মডিউল আছে এবং গত মাসে প্রায় 390,000 ডাউনলোড করা হয়েছে।

নোড ইনস্টলিং এর নিয়মঃ

শুরুতেই আপনাকে প্রথমে নোড রানটাইম ইনস্টল করতে হবে। এটি স্বয়ংক্রিয়ভাবে আপনার মেশিনে NPM ইনস্টল করবে।

এটি সম্পন্ন হলে, লিখতে হবে

$ node -v

নোড প্যাকেজ ইনস্টলিং এর নিয়মঃ

একটি নোড প্যাকেজ ইনস্টল করা সহজ।

$ npm install grunt

এটি node_modules নামক একটি ফোল্ডারে ইনস্টল হবে।

একটি প্যাকেজ আন-ইনস্টল করতেঃ

একটি প্যাকেজ আনইনস্টল করতে নিম্নক্ত পদ্ধতি অবলম্বন করুন।

$ npm uninstall --save-dev grunt

এর ফলে package.json থেকে প্যাকেজটি মুছে যাবে।

বিশ্বব্যাপী প্যাকেজসমূহঃ

প্যাকেজ ইনস্টলের পাশাপাশি dev বা রানটাইম নির্ভর করে।

$ npm install grunt –g

প্যাকেজ পুনরুদ্ধারের নিয়মঃ

আপনার VCS করতে node_modules ফোল্ডার কমিট করবেন না।

রুট ডিরেক্টরিতে নির্বাহ করতেঃ

$ npm install

সংস্করণ করাঃ

একটি সংস্করণ সংখ্যা হলো MINOR.PATCH
যখন আপনি অসামঞ্জস্যপূর্ণ মেজর সংস্করণ করেন, তখন API- র পরিবর্তন হয়।
ক্ষুদ্র সংস্করণ হয় যখন আপনি পিছন দিকে একটি উপযুক্ত পদ্ধতিতে কার্যকারিতা যোগ করেন, এবং যখন আপনি পিছন দিকে-সামঞ্জস্যপূর্ণ বাগ সংশোধন করেন, তখন প্যাচ সংস্করণ হয়।
NPM 1.3.5: প্যাকেজ (সবচেয়ে নিয়ন্ত্রণমূলক) দেওয়া সংস্করণ ব্যবহার করতে বলে।
বাড়তি প্যাচ সংস্করণের (সাধারণত বাগ) জন্য3.5 বা 1.3.x: NPM শুধুমাত্র আপগ্রেড দেওয়া প্যাকেজকে এভাবে উল্লেখ করে => = 1.3.5-0
4.0-0: NPM এটি সংজ্ঞায়িত করে এভাবে ~ 1.3.5
^ 1.3.5: <2.0.0: এটি প্রধান রিলিজের চেয়ে পরবর্তী কোনো সংস্করণে আপগ্রেড করতে NPM এভাবে উল্লেখ করেঃ :<2.0.0 ।
যখন আপনি নোড প্যাকেজ ইনস্টল করবেন তখন নতুন NPM 1.3.5 ডিফল্ট সিস্টেম এভাবে টা প্রদর্শন করবে => = 1.3.5-0 <2.0.0-0

বোয়ারঃ

এটা একটি প্যাকেজ ম্যানেজার যা আপনার সামনের শেষ উন্নয়ন লাইব্রেরি যেমন jQuery, বুটস্ট্র্যাপ এর জন্য।

$ npm install -g bower

একটি bower.json ফাইলের উদাহরণ।

একটি প্যাকেজ আন-ইনস্টল করতে হলে এই পদ্ধতি অনুসরণ করুনঃ

$ bower uninstall --save jquery

ইওম্যানঃ

ইওম্যান এক ধরণের জেনারেটর দ্বারা ।

ইওম্যান এর জেনারেটরগুলো একটি নোড মডিউল হিসাবে বিতরণ করা হয়।

এটি ইনস্টল করতেঃ

$ npm install -g yo

Gruntfile.js :

Gruntfile.js সেই স্থান যেখানে আপনি আপনার প্রকল্পের কাজটি কনফিগার করবেন। এই ফাইলটি সহজে শুরু করতে:

module.exports = function(grunt) {

// Do grunt-related things in here

};

গ্রান্ট মডিউলসঃ

গ্রান্ট মডিউল নোড এর NPM ডিরেক্টরির মাধ্যমে বিতরণ করা হয়। গ্রান্ট মডিউলসই ইনস্টল করতে আমার দেখানো পদ্ধতি অনুসরণ করুনঃ

$ npm install --save-dev grunt-contrib-uglify

গ্রান্ট টাস্কের কারণ বিশ্লেষণঃ

আপনি বিল্ড টাস্ক নির্ধারণ শুরু করতে চাইলে আমার আগে উল্লেখ করা গ্রান্ট বইটির উদাহরণস্বরূপ stringCheck টাস্কটিকে অনুসরণ করবেন।

module.exports = function(grunt){

...

grunt.initConfig({

stringCheck: {

file: './src/somefile.js',

string: 'console.log('

}

});

}

আপনি দেখতে পাবেন, একটি টাস্ক কেবলি একটি ফাংশন যা আপনি রেজিস্টার করবেন গ্রান্ট এর সাথে।

module.exports = function(grunt){

grunt.registerTask('stringCheck', function() {

//fail if configuration is not provided

grunt.config.requires('stringCheck.file');

grunt.config.requires('stringCheck.string');

//retrieve filename and load it

var file = grunt.config('stringCheck.file');

var contents = grunt.file.read(file);

//retrieve string to search for

var string = grunt.config('stringCheck.string');

if(contents.indexOf(string >= 0))

grunt.fail.warn('"' + string + '" found in "' + file + '"');

});

}

একাধিক টাস্কঃ

গ্রান্ট আপনাকে দিচ্ছে একটি টাস্ক সঞ্চালনের গ্রুপ।নিম্নক্তঃ

module.exports = function(grunt){

...

grunt.initConfig({

stringCheck: {

target1: {

file: './src/somefile.js',

string: 'console.log('

target2: {

file: './src/somefile.js',

string: 'eval('

}

});

}

গ্লোবিং:

ফাইল গ্লোবিং বা ওয়াইল্ডকার্ড সাদৃশ্যকরণ একটি বড় গ্রুপের ফাইল ক্যাপচার করার একটি পদ্ধতি।

চলমান কর্মঃ

আপনি যদি একটি টাস্ক রান করতে চাইলে নিম্নের পদ্ধতি অনুসরণ করুনঃ

$ grunt task1 task2

যদি আপনার একাধিক টাস্কের উদ্দেশ্য থাকে, তাহলে নিম্নক্ত পদ্ধতি অনুসরণ করুনঃ

$ grunt task:target1

আপনি যদি এর পরিবর্তে গ্রান্ট চালান, তাহলে ডিফল্ট টাস্ক চলতে থাকবে যা আপনি নিম্নরূপ কনফিগার করতে পারেনঃ

module.exports = function(grunt) {

grunt.registerTask('build', function() {

console.log('building...');

});

grunt.registerTask('test', function() {

console.log('testing...');

});

grunt.registerTask('default', ['build', 'test']);

};

গাল্পঃ

নোড কখনই পূর্ণতা পাবে না, যদি আমরা গাল্পকে উল্লেখ না করি। গাল্প হলো জাভা স্ক্রিপ্ট টাস্কের এর আগত নতুন সঞ্চালক যা Node.js প্রবাহের উপর নির্মিত। এটি স্ক্রিপ্টকে সহজে নির্মাণের লক্ষে “অনুরক্ত কনফিগারেশন কোড” ব্যবহার করা হয়।

এস ই ও - ০০৩ । SEO Details - 003

এসইও – ডিজাইন ও লেআউট বা বিন্যাস । SEO – Design & Layout

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

নয়ন চন্দ্র দত্ত

ওয়েবসাইট ডিজাইন এবং বিন্যাস আপনার সাইট সম্পর্কে প্রথম ছাপ ফেলে। অনেক সাইট আছে যা খুব অভিনব এবং নিয়মিত নেট surfers ঐ সাইটে পৌঁছায় এবং তৈরি করা ছাড়াই একটি ক্লিকেই এসে পড়ে।

সার্চ ইঞ্জিন, খুব স্মার্ট কিন্তু তারপরও তারা সফ্টওয়্যার এবং মানুষের মত না এবং যারা তাদের আগ্রহের বিষয়বস্তু পড়তে পারেন। যদি আপনি আপনার সাইটকে খুব জটিল করেন তাহলে সার্চ ইঞ্জিন সঠিকভাবে আপনার সাইটের বিষয়বস্তু বিশ্লেষণ করতে সক্ষম হবে না এবং পরিশেষে ইন্ডেক্স উন্নত হবে না যার ফলাফল হবে নিম্ন মানের।

প্রকৃত পেজে কন্টেন্ট প্রায় 10% এর একটি শব্দ ঘনত্ব থাকতে হবে এবং প্রায় 200 শব্দ এ তৈরী করা উচিত কিন্তু এসইও বিশেষজ্ঞদের এই সম্পর্কে অনেক মতামত আছে। অনেকে বলে, শব্দ ঘনত্ব 5% হতে হবে আবার অনেকে বলে এটা 20% হতে হবে। আপনি 10% সঙ্গে যেতে পারেন যা যথেষ্ট ভাল।

এখানে কয়েকটি নির্দেশিকা আছে যা একটি ওয়েব পেজ নকশা করার সময় আপনি মনে রাখতে পারেনঃ

আপনার HTML element এর চেয়ে বেশি টেক্সট কন্টেন্ট থাকতে হবে
কোন ফ্রেম নয় তারা সার্চ ইঞ্জি্নের শত্রু এবং সার্চ ইঞ্জিন ফ্রেমের শত্রু
যদি সম্ভব হয় তাহলে কোন বিজ্ঞাপন দিবেন না কারণ বিজ্ঞাপনগুলো বেশীরভাগ জাভা - স্ক্রিপ্ট ব্যবহার করে যা পরামর্শ দেওয়া হয় না
কোন জাভাস্ক্রিপ্ট না। যদি জাভাস্ক্রিপ্ট প্রয়োজন হয় তাহলে HTML ফাইল এ কোড ডাম্পিং চেয়ে একটি বহিরাগত ফাইল থেকে নিন
টপিক পেজে কিছু নিবেন না যা পুরোপুরি মিশবে না
কোন অপ্রয়োজনীয় ডিরেক্টরি দিবেন না। যথাসম্ভব রুটের কাছাকাছি আপনার ফাইল রাখুন।
যদি না অত্যাবশ্যক হয় তাহলে কোন অভিনব জিনিস নয়। যেমন- ফ্ল্যাশ , স্প্ল্যাশ, প্রাণবন্ত gifs , rollovers , ইত্যাদি ।

প্রাথমিক সি প্রোগ্রামিং । C Programming Basics

সি প্রোগ্রামিং ল্যাংগুয়েজ পরিচিতি (C – Language Overview)

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

সি প্রোগ্রামিং ল্যাঙ্গুয়েজ
নাফিরুল ইসলাম

সি প্রোগ্রামিং ল্যাঙ্গুয়েজ প্রথম উদ্ভাবিত হয়েছিল ডেনিশ এম রিচসি এর মাধ্যমে যার প্রধান লক্ষই ছিল উনিক্স অপারেটিং সিস্টেম ব্যবহার উন্নত পর্যায়ে নিয়ে যাওয়া। DEC PDP-11 কম্পিউটারে ১৯৭২ এই সি প্রোগ্রামিং ল্যাঙ্গুয়েজ এর ব্যবহার প্রথম লক্ষ্য করা যায়।

১৯৭২ সালে ব্রায়ান কারনিঘান এবং ডেনিশ রিচসি দুজনে মিলে সি প্রোগ্রামিং ল্যাঙ্গুয়েজ প্রথম বিবরণ বের করেন যা এখন K&R Standard নামে পরিচিত।

উনিক্স অপারেটিং সিস্টেম, সি কম্পাইলার এবং উনিক্স অপারেটিং সিস্টেম এর সব গুরুত্বপূর্ণ প্রোগ্রামগুলো সি প্রোগ্রামিং ল্যাঙ্গুয়েজ এ রচিত। এখন তা বিভিন্ন কারনে টেকনোলজি বিশ্বে জনপ্রিয়তা অর্জন করেছে। এগুলোর মধ্যে উল্লেখযোগ্য কিছু কারন হল,
১. এটা সহজেয় শেখা যায়।
২. এটা একটা সুগঠিত প্রোগ্রামিং ভাষা।
৩. এটা সাবলীল প্রোগ্রাম তৈরিতে ব্যবহার করা হয়।
৪. এটা ল-লেভেল কাজ গুলো রক্ষা করতেও ব্যবহার করা হয়।
৫. এটা কম্পিউটার এর বিভিন্ন প্লাটফর্মে প্রয়োগ করা যাবে।

সি ল্যাঙ্গুয়েজ সম্পর্কে যা কিছু সত্যি

১. এটা প্রধানত উনিক্স অপারেটিং সিস্টেম তৈরিতে প্রথম উদ্ভাবন করা হয়েছিল।
২. ১৯৭০ সালের বি ল্যাঙ্গুয়েজ এর উত্তরসরি হল সি ল্যাঙ্গুয়েজ।
৩. এটা ১৯৮৮ সালে American National Standard Institute এর দ্বারা প্রাতিষ্ঠানিক রূপ দেয়া হয়েছিল।
৪. ১৯৭৩ সালে উনিক্স অপারেটিং সিস্টেম এর পুরোটাই সি ল্যাঙ্গুয়েজ এ তৈরি করা হয়েছিল।
৫. আজকের অতীব জনপ্রিয় অপারেটিং সিস্টেম লিনাক্স এর অপারেটিং সিস্টেম এবং RBDMS মাইএসকিউএল সি ল্যাঙ্গুয়েজ এ রচিত হয়েছে।

jQuery Mobile । জেকুএরি মোবাইল

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস (jQuery Mobile List Views)

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস (jQuery Mobile List Views)
মো: আসাদুজ্জামান (Md. Asaduzzaman)
ফ্রিল্যান্সার (ওয়েব ডিজাইনার এবং ডেভেলপার।)

জেকুয়্যেরি(jQuery) মোবাইল লিস্ট ভিউস:

জেক্যুয়েরিতে মোবাইল লিস্ট ভিউস এইচটিএমএল এর আদর্শ লিস্টস্: অর্ডার্ড (<ol>) এবং আনঅডার্ড (<ul>).
একটি লিস্ট তৈরি করার জন্য, ="listview" ডাটা-রোলটি <ol> অথবা <ul> এলিমেন্ট এ প্রয়োগ করতে হবে।আইটেমকে ট্যাপাবল (tappable) করার জন্য লিস্ট আইটেম (<li>) এর মধ্যে লিংক স্পেসিফাই করুন:

উদাহরণ:
<ol data-role="listview">
<li><a href="#">List Item</a></li>
</ol>

লিস্টকে বৃত্তাকার কোণ এবং কিছু মার্জিন এর মাধ্যমে স্টাইল করার জন্য "true" এট্ট্রিবিউট ডাটা-ইনসার্ট (data-insert) হিসেবে ব্যবহার করুন:
উদাহরণ:
<ul data-role="listview" data-inset="true">

# ডিফল্টরূপে, একটি লিস্ট আইটেম এর ভিতরে লিংক স্বয়ংক্রিয়ভাবে একটি বাটন এ পরিণত হয় (ui-class="btn" or data-role="button" এগুলোর কোন প্রয়োজন নেই)।

লিস্ট ডিভাইডার (List Dividers
)
লিস্ট ডিভাইডার ব্যবহার করা হয় বিভাগ (categories) /সেকশনস কে সংগঠিত করা এবং গ্রুপ আইটেমস করার জন্য।

একটি লিস্ট ডিভাইডার কে নির্দেশ (specify) করার জন্য data-role="list-divider" এট্রিবিউট একটি <li> এলিমেন্ট এ অন্তভূক্ত করতে হবে:

উদাহরণ:
<ul data-role="listview">
<li data-role="list-divider">Europe</li>
<li><a href="#">Norway</a></li>
<li><a href="#">Germany</a></li>
</ul>

আপনার যদি একটি বর্ণানুক্রমে তালিকা থাকে, (যেমন একটি ফোন বুক)<ol> অথবা <ul> এলিমেন্ট এ data-autodividers="true" এট্রিবিউট jQuery মোবাইল স্বয়ংক্রিয়ভাবে সঠিক ডিভাইডার যোগ করে:

উদাহরণ:
<ul data-role="listview" data-autodividers="true">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
...
</ul>

data-autodividers="true" অ্যাট্রিবিউট আইটেম এর টেক্সট এ প্রথম অক্ষর বড় হাতের অক্ষর দিয়ে বিভক্ত সৃষ্টি করে.

আরো উদাহরণ

Read-only lists
লিঙ্ক ছাড়া তালিকা তৈরি করুন (বাটন হবে না এবং ট্যাপাবল হবে না).

Panels
কিভাবে আপনার লিস্ট আইটেম এ প্যানেল সন্নিবেশ করবেন.

jQuery Mobile । জেকুএরি মোবাইল

jQuery Mobile Panels

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

jQuery Mobile Panels
parijat biswas
student of CSE
university of Asia Pacific
jQuery Mobile Panels
jQuery Mobile panel বাম অথবা ডান দিক থেকে অতিরিক্ত content এর সাথে slide out হবে।
panel টি open করতে নিচের বাটন টি click করুন।
OPEN PANEL
একটি panel তৈরি করতে data-role="panel" যোগ করুন <div> element এ ,এবং একটি id নির্ধারণ করুন।
এই <div> element এর ভিতরে যেকোনো html markup বসান, যা আপনি আপনার panel এ display করতে চান।
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>
বি.দ্র. : panel markup অবশ্যই header,content এবং jQuery mobile page এবং footer inside এর পূর্বে বা পরে বসবে।
Panel এ প্রবেশ করতে একটি link তৈরি করুন যা panel id <div> কে প্রকাশ করে। যখন ব্যবহারকারী link এ click করবে, তখন panel টি open হবে।
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
নিচে একটি সাধারন উদাহরণ দেওয়া হলঃ
উদাহরণ
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
</div>

<div data-role="header">
<h1>Standard Page Header</h1>
</div>

<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
</div>

<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
* নিজে চেষ্টা করে দেখুন।
Closing Panels ( Panel বন্ধ করা )
আপনি panel এর বাইরে click করে বা esc বাটন চেপে panel বন্ধ করতে পারেন।
<div> প্যানেল এ additional data-* যোগ করে আপনি clicking এবং swiping ফিচার disable করতে পারেনঃ
Attribute value description(ব্যাখ্যা)

data-dismissible true | false বাইরে click করলে panel close হবে নাকি হবে না, তা নির্ধারণ করে ।
data-swipe-close true | false swiping করলে panel close হবে নাকি হবে না , তা নির্ধারণ করে ।
আপনি একটি বাটন ব্যবহার করেও panel close করতে পারেনঃ শুধুমাত্র <div> panel এর ভিতরে data-rel="close" এর সাথে একটি link যুক্ত করুন । আপনি href attribute দিয়েও page id point করতে পারবেন যখন ব্যবহারকারী panel close করবে।
উদাহরনঃ
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some text in the panel..</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div>
* নিজে চেষ্টা করে দেখুন।
Panel Display
আপনি panel এর display mode control করতে পারেন data-display attribute দিয়েঃ
Attribute value ব্যাখ্যা
data-display="overlay" প্রদত্ত প্যানেল প্রদর্শন করে
data-display="push" প্যানেল এবং পাতা একই সময়ে animate করে
data-display="reveal" ডিফল্ট। পেজের নিচে panel থাকবে এবং প্রকাশ করবে যেহেতু page slide হবে।

উদাহরনঃ
<div data-role="panel" id="overlayPanel" data-display="overlay">
<div data-role="panel" id="revealPanel" data-display="reveal">
<div data-role="panel" id="pushPanel" data-display="push">

* নিজে চেষ্টা করে দেখুন।

Positioning Panels ( প্যানেল এর পজিশনিং)
স্বয়ংক্রিয়ভাবে panel পেজের বাম পাশে থাকবে । পেজের ডান পাশে panel নিতে data-position="right" attribute টি ব্যবহার করতে হবে ।
উদাহরনঃ
<div data-role="panel" id="myPanel" data-position="right">
* নিজে চেষ্টা করে দেখুন।
তাছাড়া যখন page scroll করা শুরু হয় page content কোথাই / কিভাবে বসাবেন তা আপনি নির্ধারণ করতে পারবেন। স্বয়ংক্রিয়ভাবে, panel পেজ scroll করতে শুরু করবে( কিন্তু panel content পেজের একদম উপরে থাকবে ) যদি আপনি সবসময়ই panel content প্রদর্শন করতে চান তাহলে data-position-fixed="true" attribute টি panel এ ব্যবহার করুন ।
উদাহরনঃ
<div data-role="panel" id="myPanel" data-position-fixed="true">
* নিজে চেষ্টা করে দেখুন।

jQuery Mobile । জেকুএরি মোবাইল

jQuery Mobile পরিচিতি – jQuery Mobile Introduction

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

jQuery Mobile পরিচিতি

পারিজাত বিশ্বাস (Student of CSE at university of Asia Pacific)
jQuery Mobile হল, মোবাইল ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য একটি web framework.
আপনার jQuery Mobile শুরু করার আগে, নিচের বিষয়গুলো সম্পর্কে মৌলিক জ্ঞান থাকতে হবেঃ
১. HTML
২. CSS
৩. jQuery

jQuery Mobile কি?
jQuery Mobile হচ্ছে মোবাইল web অ্যাপ্লিকেশান তৈরির জন্য touch-optimized web framework.
jQuery Mobile সকল প্লাটফর্ম এ কাজ করে । যেমনঃ
১. iOS
২. অ্যান্ড্রয়েড
৩. ব্ল্যাকবেরি
৪. bada
৫. উইন্ডোজ ফোন
৬. সিম্বিয়ান
৭. পাম অপারেটিং সিস্টেম
৮. MeeGoo
jQuery Mobile হল jQuery library এর উপর নির্মিত ,আপনার যদি jQuery জানা থাকে তবে খুব সহজেই এটি শিখতে পারবেন।
এটি HTML5, CSS3, JavaScript এবং AJAX ব্যবহার করে সংক্ষিপ্ত স্ক্রিপ্টিং এর মাধ্যমে এর কাজ করে।

কেন jQuery Mobile ব্যবহার করবেন ?
jQuery mobile এর স্লোগান হচ্ছে, “ write less, do more”. এটি স্বয়ংক্রিয়ভাবে ওয়েব পেজ ডিজাইন করে যা খুব আকর্ষণীয় ও ব্যবহার করা সহজ এবং যা সকল মোবাইল ডিভাইস এ একই ভাবে কাজ করে ।
পূর্বে প্রতিটা OSOS এর জন্য আলাদা অ্যাপ্লিকেশান ব্যবহার করা হত। যেমনঃ
১. অ্যান্ড্রয়েড ও ব্ল্যাকবেরিতে java ব্যবহার করা হয়।
২. ios এ Objective C ব্যবহার করা হয়।
৩. উইন্ডোজ ফোনএ C# এবং .net ব্যবহার করা হয় ।
jQuery Mobile এই সমস্যার সমাধান করেছে। এটি শুধুমাত্র HTML, CSS and JavaScript ব্যবহার করে, যা সব মোবাইল ওয়েব ব্রাউজার জন্য আদর্শ !
Best Reading Experience (সেরা পড়ার অভিজ্ঞতা)।
jQuery Mobile সব মোবাইল ডিভাইসের উপর কাজ করে, এমনকি যদিও এটা ডেস্কটপ কম্পিউটারের কিছু বিষয় এর সাথে মিল থাকতে পারে ( সীমিত CSS 3 সমর্থন এর কারনে )।

Root

জেকোয়েরি মোবাইলের পরিচয় ।

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইলের পরিচয় ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরি মোবাইল হলো একটি ওয়েব ফ্রেমওয়ার্ক যা মোবাইল ওয়েব-অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করা হয় ।

জেকোয়েরি মোবাইল শেখার আগে যা জানা অত্যাবশ্যক
জেকোয়েরি মোবাইল শেখার আগে আপনাকে অবশ্যই এইচটিএমএল, সিএসএস এবং জেকোয়েরি সম্পর্কে ব্যাসিক জ্ঞান থাকতে হবে ।
এ জন্য আমাদের আগের টিউটোরিয়াল গুলো অবশ্যই শিখে নিতে হবে ।

জেকোয়েরি মোবাইল কি?
জেকোয়েরি মোবাইল হলো একটি টাচ সাপোর্টেড ওয়েব ফ্রেমওয়ার্ক যা মোবাইল ওয়েব-অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করা হয় । জেকোয়েরি মোবাইল সকল প্রকার জনপ্রিয় স্মার্টফোন এবং ট্যাবলেট গুলোতে সাপোর্ট করে । এর ভিতর আইওএস, এন্ড্রোয়েড, ব্লাকবেরি, বাদা, ইউন্ডোজ ফোন, পাম ওয়েব ওস, সিম্বিয়ান, মিগো উল্লেখযোগ্য ।
জেকোয়েরি মোবাইল জেকোয়েরি লাইব্রেরি এর সবার উপরে থাকে । আপনি যদি জেকোয়েরি শিখে থাকেন তাহলে আপনার এটা শিখতে অনেক সহজ হবে । এটা এইচটিএমএল ৫, সিএসএস ৩ এবং অ্যাজাক্স ব্যবহার করে খুব অল্প পরিমান স্ক্রিপ্ট ব্যবহার করে কাজ করে ।

জেকোয়েরি মোবাইল কেনো ব্যবহার করবো ?
জেকোয়েরি মোবাইল হলো অল্প লেখা কিন্তু কাজ বেশি । মানে এটা কথা বলার চেয়ে কাজে দেখাতে বেশি ভালবাসে । এটা স্বয়ংক্রিয়ভাবে ওয়েব পেজ আকর্ষণীয়ভাবে তৈরি করে । এটা ব্যবহার খুবই সহজ । এটা সকল মোবাইল ডিভাইসে একই ভাবে কাজ করে ।

সকল মোবাইল ডিভাইস বা ওএস এ অ্যাপ্লিকেশন লিখতে যা ব্যবহার করেঃ
১। এড্রোয়েড এবং ব্লাকবেরি জাভা তে লেখা হয় ।
২। আইওএস Objective C তে লেখা হয় ।
৩। উইন্ডোজ ফোনে C# এবং .net প্রভৃতি ব্যবহার করা হয় ।

জেকোয়েরি মোবাইল এই সমস্যা দূর করতে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে যা সকল মোবাইল ওয়েব ব্রাউজারের জন্য যথেষ্ট ।

পড়াতে নতুন অভিজ্ঞতা
জেকয়েরি মোবাইল সকল মোবাইল ডিভাইসে খুব ভালভাবে সাপোর্ট করে । তাই আপনি সকল সাইটের সবকিছু পড়তে গিয়ে পাবেন এক নতুন অভিজ্ঞতা । কিন্তু ডেস্কটপ কম্পিউটারের ক্ষেত্রে জেকোয়েরি মোবাইল এর কিছু সামঞ্জস্য সমস্যা দেখা দেয় ।

তাহলে আজ জেকোয়েরি মোবাইল এর ধারণা নিলেন । পরের পোস্টে আরো বিস্তারিত নিয়ে হাজির হবো ।

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার । jQuery Mobile CSS Classes

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

কি খবর ? কেমন আছেন সবাই? আজকে একটু ঠাণ্ডা বেশি, তাই সবাই মনে হয় লেপের ভিতর থেকে ভালোই আছেন । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখাবো ।

jQuery CSS Classes
জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।

Global Classes
এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-corner-all
ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-shadow
ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-overlay-shadow
ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-mini
ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।

Button Classes
<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn
ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-inline
ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।

ক্লাসের নামঃ ui-btn-icon-top
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-right
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-bottom
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-left
ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।

ক্লাসের নামঃ ui-btn-icon-notext
ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।

ক্লাসের নামঃ ui-btn-a|b
ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।

Icon Classes
সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।

ক্লাসের নামঃ ui-icon-action
ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।

ক্লাসের নামঃ ui-icon-alert
ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।

ক্লাসের নামঃ ui-icon-audio
ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-l
ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d-r
ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-l
ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u-r
ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-l
ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-r
ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-arrow-d
ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।

ক্লাসের নামঃ ui-icon-back
ক্লাসের বর্ণনাঃ ব্যাক বাটন ।

ক্লাসের নামঃ ui-icon-bars
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।

ক্লাসের নামঃ ui-icon-bullets
ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।

ক্লাসের নামঃ ui-icon-calendar
ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।

ক্লাসের নামঃ ui-icon-camera
ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।

ক্লাসের নামঃ ui-icon-carat-d
ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-l
ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-r
ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-carat-u
ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।

ক্লাসের নামঃ ui-icon-check
ক্লাসের বর্ণনাঃ চেক মার্ক ।

ক্লাসের নামঃ ui-icon-clock
ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।

ক্লাসের নামঃ ui-icon-cloud
ক্লাসের বর্ণনাঃ মেঘের আইকন ।

ক্লাসের নামঃ ui-icon-comment
ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।

ক্লাসের নামঃ ui-icon-delete
ক্লাসের বর্ণনাঃ ডিলিট বাটন ।

ক্লাসের নামঃ ui-icon-edit
ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।

ক্লাসের নামঃ ui-icon-eye
ক্লাসের বর্ণনাঃ চোখের আইকন ।

ক্লাসের নামঃ ui-icon-forbidden
ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।

ক্লাসের নামঃ ui-icon-forward
ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।

ক্লাসের নামঃ ui-icon-gear
ক্লাসের বর্ণনাঃ সেটিংস বাটন ।

ক্লাসের নামঃ ui-icon-grid
ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।

ক্লাসের নামঃ ui-icon-heart
ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।

ক্লাসের নামঃ ui-icon-home
ক্লাসের বর্ণনাঃ হোম বাটন ।

ক্লাসের নামঃ ui-icon-info
ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।

ক্লাসের নামঃ ui-icon-location
ক্লাসের বর্ণনাঃ লোকেশন বাটন ।

ক্লাসের নামঃ ui-icon-lock
ক্লাসের বর্ণনাঃ তালার আইকন ।

ক্লাসের নামঃ ui-icon-mail
ক্লাসের বর্ণনাঃ মেইল আইকন ।

ক্লাসের নামঃ ui-icon-minus
ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।

ক্লাসের নামঃ ui-icon-navigation
ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।

ক্লাসের নামঃ ui-icon-phone
ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।

ক্লাসের নামঃ ui-icon-power
ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।

ক্লাসের নামঃ ui-icon-plus
ক্লাসের বর্ণনাঃ যোগ বাটন ।

ক্লাসের নামঃ ui-icon-recycle
ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।

ক্লাসের নামঃ ui-icon-refresh
ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।

ক্লাসের নামঃ ui-icon-search
ক্লাসের বর্ণনাঃ সার্চ বাটন ।

ক্লাসের নামঃ ui-icon-shop
ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।

ক্লাসের নামঃ ui-icon-star
ক্লাসের বর্ণনাঃ তারার চিহ্ন ।

ক্লাসের নামঃ ui-icon-tag
ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।

ক্লাসের নামঃ ui-icon-user
ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।

ক্লাসের নামঃ ui-icon-video
ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।

Theme Classes
জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।

ক্লাসের নামঃ ui-bar-(a-z)
ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-body-(a-z)
ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।

ক্লাসের নামঃ ui-btn-(a-z)
ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।

ক্লাসের নামঃ ui-group-theme-(a-z)
ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।

ক্লাসের নামঃ ui-overlay-(a-z)
ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।

ক্লাসের নামঃ ui-page-theme-(a-z)
ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।

Grid Classes
গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।

গ্রিড ক্লাসঃ ui-grid-solo
কলামঃ 1
কলামের ব্যাপ্তিঃ 100%
সুসঙ্গত হয়ঃ ui-block-a

গ্রিড ক্লাসঃ ui-grid-a
কলামঃ 2
কলামের ব্যাপ্তিঃ 50% / 50%
সুসঙ্গত হয়ঃ ui-block-a|b

গ্রিড ক্লাসঃ ui-grid-b
কলামঃ 3
কলামের ব্যাপ্তিঃ 33% / 33% / 33%
সুসঙ্গত হয়ঃ ui-block-a|b|c

গ্রিড ক্লাসঃ ui-grid-c
কলামঃ 4
কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d

গ্রিড ক্লাসঃ ui-grid-d
কলামঃ 5
কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%
সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e

আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি দিয়ে মোবাইল টুলবার এর বাটন বানানো . jQuery Mobile Toolbars

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি দিয়ে মোবাইল বাটন বানানো

লেখকঃ মোস্তাফিজুর ফিরোজ ।

আমরা প্রত্যেক সাইটে ঢুকলে অনেক ধরণের বাটন দেখি । এগুলো আমাদের সাইটটিকে খুব সহজে ভিজিট করতে আর এক পেজ থেকে হোম পেজ অথবা অন্য কোন পেজে নেভিগেশনে সাহায্য করে । আসুন আজ খুব সহজে জেকোয়েরি দিয়ে বাটন বানানো শিখবো ।

জেকোয়েরি মোবাইল বাটনগুলো সাধারণত হেড এবং ফুটারে বসানো হয়ে থাকে । কারণ এই দুইটি স্থান থেকেই সবাই পেজ নেভিগেশন করতে চায় ।

হেডার বারের কোড সমূহ
হেডার বার বলতে একটা সাইটের পেজের উপরিভাগকে বুঝায় । হেডার সাধারণত একটি পেজের নাম অথবা লোগো অথবা হোম, অপশন অথবা খোঁজার জন্য এক অথবা দুইটি বাটন থাকে ।
আপনি খুব সহজেই হেডারের বাম অথবা ডান সাইডে বাটন যোগ করতে পারেন জেকোয়েরি ব্যবহার করে ।

<div data-role="header">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div>

উপরের কোডটুকু আপনাকে পেজের বাম সাইডে একটা হোম বাটন এবং ডান সাইডে একটা খোঁজ বাটন যুক্ত করতে সাহায্য করবে ।

<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের বাম সাইডে একটা বাটন যুক্ত করতে পারবেন ।

<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div>

এই কোড ব্যবহার করে আপনি হেডারের টাইটেলের ডান সাইডে একটা বাটন যুক্ত করতে পারবেন ।

মনে রাখবেন হেডারে আপনি একসাথে দুইটির বেশি বাটন রাখতে পারবেন না । কিন্তু ফুটারে বাটনের কোনো সীমাবদ্ধতা নেই । আপনি আপনার ইচ্ছামত বাটন ব্যবহার করতে পারবেন ।

ফুটার বারের কোড সমূহ
একটি পেজের সবথেকে নিচের অংশকে ফুটার বলা হয় । ফুটার হেডারের চেয়ে বেশি পরিবর্তন করা সহজ । এতে বেশি পেজ লিংক, বাটন ইত্যাদি যোগ করে একে আরো বেশি আকর্ষণীয় করে তোলা যায় ।

<div data-role="footer">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>

এই কোডটি ফুটারে বসিয়ে আপনি খুব সহজে ফেসবুক, টুইটার, ইন্সটাগ্রামের বাটন যোগ করতে পারবেন ।

কিন্তু ফুটারের বাটনগুলো সাধারণত মাঝখানে বসে না । তাই এই জন্য আপনাকে নিচের সিএসএস কোড দিয়ে পরিবর্তন করে নিতে হবে ।
<div data-role="footer" style="text-align:center;">

তাছাড়া আপনি গুরুপ বাটন গুলো ফুটারে নিচের কোড দিয়ে সমান্তরালে অথবা আনুভূমিকভাবে ব্যবহার করতে পারবেন ।

<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div>

হেডার এবং ফুটারের পজিশন ঠিক করা
হেডার এবং ফুটারের পজিশন তিনভাবে ঠিক করা যায় ।
১। ইনলাইনঃ এটা ডিফল্টভাবে যেটা দেয়া থাকে । মানে হেডার এবং ফুটার পেজের উপাদানের সাথে একই লাইনে থাকে ।

২। ফিক্সডঃ হেডার এবং ফুটার যথাক্রমে পেজের উপরে এবং নিচে থাকে ।

৩। ফুল স্ক্রীনঃ এটা ফিক্সড পজিশনের মত । কিন্তু এতে হেডার এবং ফুটার পেজের উপাদান সমূহের উপরে থাকে ।

আসুন তাহলে এবার কোড গুলো দেখে নেই ।
১। ইনলাইন পজিশনের কোডঃ
<div data-role="header" data-position="inline"></div>
<div data-role="footer" data-position="inline"></div>

২। ফিক্সড পজিশনের কোডঃ
<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>

৩। ফুল স্ক্রীন পজিশনের কোডঃ
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

এতে উপরের মত data-position="fixed" রাখতে হবে ।
ফুল স্ক্রীন পজিশন ছবি, ভিডিও সাইটের জন্য খুব উপযোগী ।

আর এরই ভিতর কিন্তু আমরা খুব সহজে জেকোয়েরি দিয়ে মোবাইল বাটন বানানো শিখে গেলাম । খুব সহজ তাই না । হুম, আমার কাছেও এটা খুব সহজ লাগে । তবুও কোথাও না বুঝলে কমেন্ত করতে ভুলবেন না কিন্তু ।

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার । jQuery Mobile Transitions

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।

আস্তে আস্তে আমরা জেকোয়েরি মোবাইল এর সব কিছু শিখে ফেলবো । আজ আমরা শিখবো জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস এর ব্যবহার ।

জেকোয়েরি মোবাইলে সিএসএস৩ ইফেক্টস যোগ করা হয় যার কারনে পেজটি কিভাবে আমাদের সামনে ওপেন হবে তা নির্ধারিত হয় ।

জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস
এক পেজ থেকে অন্য পেজে কিভাবে যাবে তার জন্য জেকোয়েরি মোবাইলের অনেক ধরণের ইফেক্ট আছে । ট্রানজিশন ইফেক্ট ব্যবহার করতে গেলে আপনার ব্রাউজারে অবশ্যই CSS3 3D Transforms সাপোর্ট থাকতে হবে । এজন্য আপনাকে গুগল ক্রোম ১২+ , ইন্টারনেট এক্সপোলার ১০+ , মোজিলা ফায়ারফক্স ১৬+ , সাফারী ৪+, অপেরা ১৫+ ভার্সনের ব্রাউজার ব্যবহার করতে হবে ।
data-transition attribute যোগ করে আমরা খুব সুহজে কোনো লিংকে ট্রানজিশন ইফেক্ট দিতে পারি ।

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

আসুন তাহলে আমরা কিছু data-transition attribute এবং তাদের সম্পর্কে জেনে নেই ।

ট্রানজিশনঃ fade
বর্ণনাঃ এটা ডিফল্টভাবে দেখায় । আস্তে আস্তে পরের পেজকে দেখায় ।

ট্রানজিশনঃ flip
বর্ণনাঃ পিছন থেকে সামনের দিকে পৃষ্ঠা উল্টানোর স্টাইলে পেজ পরিবর্তন করে ।

ট্রানজিশনঃ flow
বর্ণনাঃ পেজকে নিক্ষেপ করে এবং নতুন একটা পেজ উঠে আসে ।

ট্রানজিশনঃ pop
বর্ণনাঃ পপ-আপ ইউন্ডো আকারে পরের পেজ আসে ।

ট্রানজিশনঃ slide
বর্ণনাঃ ডান থেকে বামে স্লাইড আকারে পেজ আসে ।

ট্রানজিশনঃ slidefade
বর্ণনাঃ ডান থেকে বামে স্লাইড অদৃশ্য হতে হতে পরের পেজ আসে ।

ট্রানজিশনঃ slideup
বর্ণনাঃ নিচ থেকে উপরের দিকে স্লাইড আকারে পেজ পরিবর্তন হবে ।

ট্রানজিশনঃ slidedown
বর্ণনাঃ উপর থেকে নিচের দিকে স্লাইড আকারে পেজ পরিবর্তন হবে ।

ট্রানজিশনঃ turn
বর্ণনাঃ পরের পেজে আবর্তন করে পেজ পরিবর্তিত হয় ।

ট্রানজিশনঃ none
বর্ণনাঃ কোনো ট্রানজিশন ইফেক্ট নেই ।

ডিফল্টভাবে কিন্তু আমরা এই fade ট্রানজিশন ইফেক্ট দেখতে পাই ।
এই সকল ইফেক্টগুলো কিন্তু বাম থেক ডানে অথবা পিছন থেকে সামনের ইফেক্ট পরিবর্তন করতে পারি ।
<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>

এই কোডের মাধ্যমে আমরা পেজের ডিরেকশন ঠিক করে দিতে পারি ।

আর এরই ভেতর আমরা কিন্তু জেকোয়েরি মোবাইল ট্রানজিশন্স ইফেক্টস শিখে ফেললাম । না বুঝতে পারলে অবশ্যই কমেন্ট করবেন কিন্তু ।

Root

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জে’কুয়েরি (jQuery) মোবাইল orientationchange ইভেন্ট
-----
কেউ যখন তার মোবাইল ডিভাইসের অবস্থান (orientation) পরিবর্তন করে আনুভূমিক (horizontal) কিংবা উল্লম্ব (vertical) অবস্থায় নিয়ে আসবে তখন orientationchange ইভেন্ট কাজ করবে।
orientationchange ইভেন্ট ব্যবহার করার জন্য window object এর সাথে ইভেন্টটি সংযুক্ত করে দিতে হবে। যেমন-
$(window).on("orientationchange",function(){
alert("ডিভাইসের অবস্থান পরিবর্তন হয়েছে!");
});
callback ফাংশনটি একটি আর্গুমেন্ট ধারণ করতে পারে, আর তা হলো event অবজেক্ট; যা মোবাইল ডিভাইসের orientation বা অবস্থা জানায়: "portrait" (অর্থ হচ্ছে মোবাইল ডিভাইস এখন উল্লম্ব অবস্থানে রাখা আছে) কিংবা "landscape" (মোবাইল ডিভাইস এখন আনুভূমিক অবস্থানে রাখা আছে):
উদাহরণ:
$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});

jQuery Mobile । জেকুএরি মোবাইল

jQuery Mobile Scrollstart

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

jQuery Mobile Scrollstart
--------------------------------
অনুবাদক: ফয়সাল রকি
-------------------------------

যখন কোনো ব্যবহারকারী কোনো page scroll করা শুরু করে তখন scrollstart ইভেন্টটি কাজ করতে শুরু করে।
উদাহরণ:
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});

লক্ষ্যণীয় বিষয়: iOS ব্যবহৃত device গুলো page scroll এর সময় DOM manipulation কে freeze করে দেয়; সুতরাং যখন কোনো ব্যবহারকারী কোনো page scroll করে তখন কোনো কিছু পরিবর্তন করা সম্ভব হয় না।

jQuery Mobile Scrollstop
যখন কোনো ব্যবহারকারী কোনো page scroll করা বন্ধ করে তখন Scrollstop ইভেন্টটি কাজ শুরু করে।
উদাহরণ:
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});

Root

জেকোয়েরি মোবাইল থিমস ।

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল থিমস ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me

জেকোয়েরি মোবাইল কেমন লাগছে সবার? আমার কিন্তু জেকোয়েরি মোবাইল এর নতুন নতুন বিষয় শিখতে দারুন লাগে । আজ আমি আপনাদেরকে জেকোয়েরি মোবাইলের থিমস সম্পর্কে জানাবো ।

জেকোয়েরি মোবাইল থিমসঃ
জেকোয়েরি মোবাইল দুই ধরণের থিমস প্রদান করে । "a" এবং "b" । প্রত্যেকটির বাটন, বার, কনটেন্ট ব্লক প্রভৃতির আলাদা আলাদা রঙ আছে ।

আপনার অ্যাপ্লিকেশনের পরিবর্তন আনার জন্য data-theme এট্রিবিউট ব্যবহার করতে হবে এবং একে একটি বর্ণের সাথে নির্দিষ্ট করে দিতে হবে ।

ভেলুঃ a
বর্ণনাঃ পেজের উপাদানসমূহ উজ্জ্বল ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
হেডার এবং ফুটারও ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
বাটনগুলো উজ্জ্বল ধূসর রঙের ব্যাকগ্রাউন্ডের উপর কালো রঙের লেখায় থাকে ।
অ্যাক্টিভ বাটনগুলো নীল রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
লিংকগুলো নীল রঙের হয় ।
ইনপুট ফিল্ডগুলো সাদা ব্যাকগ্রাউন্ডের উপর উজ্জ্বল ধূসর বা কালো লেখার হয় ।

ভেলুঃ b
বর্ণনাঃ পেজের উপাদানসমূহ গাঢ় ধূসর রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
হেডার এবং ফুটারও গাঢ় ধূসর রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
বাটনগুলো কাঠ-কয়লা রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
অ্যাক্টিভ বাটনগুলো সবুজে নীল রঙের ব্যাকগ্রাউন্ডের উপর সাদা রঙের লেখায় থাকে ।
লিংকগুলো সবুজে নীল রঙের হয় ।
ইনপুট ফিল্ডগুলো কালো ব্যাকগ্রাউন্ডের উপর ধূসর বা সাদা লেখার হয় ।

তাই আপনাকে "a" অথবা "b" এর যেকোন স্টাইল দিতে গেলে class="ui-btn" ক্লাসের সাথে "ui-btn-a|b" ক্লাস ব্যবহার করতে হবে ।
<a href="#" class="ui-btn ui-btn-a|b">Button</a>

হেডার এবং ফুটারে থিম ঠিক করাঃ
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

হেডার এবং ফুটারের ডায়লগ বক্সের থিম ঠিক করাঃ
<div data-role="page" data-dialog="true" id="pagetwo">
<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>
</div>

বাটনের থিম ঠিক করাঃ
<a href="#" class="ui-btn ui-btn-b">Black Button</a>

আইকনের থিম ঠিক করাঃ
<a href="#" class="ui-btn ui-btn-b ui-icon-search ui-btn-icon-notext">Search</a>

পপ-আপের থিম ঠিক করাঃ
<div data-role="popup" id="myPopup" data-theme="b">

হেডার এবং ফুটারের বাটনের থিম ঠিক করাঃ
<div data-role="header">
<a href="#" class="ui-btn ui-btn-b">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn">Search/a>
</div>

<div data-role="footer">
<a href="#" class="ui-btn ui-btn-b">Add Me On Facebook</a>
<a href="#" class="ui-btn">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-btn-b">Add Me On Instagram</a>
</div>

নেভিগেশন বারের থিম ঠিক করাঃ
<div data-role="footer" data-theme="b">
<h1>Insert Footer Text Here</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-theme="a">Button 1</a></li>
<li><a href="#" data-icon="arrow-r">Button 2</a></li>
<li><a href="#" data-icon="arrow-r">Button 3</a></li>
<li><a href="#" data-icon="search" data-theme="a">Button 4</a></li>
</ul>
</div>
</div>

প্যানেলের থিম ঠিক করাঃ
<div data-role="panel" id="myPanel" data-theme="b">

কুলাপসিবল বাটনের এবং উপাদানের থিম ঠিক করাঃ
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
</div>

লিস্টের থিম ঠিক করাঃ
<ul data-role="listview" data-theme="b">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li data-theme="a"><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>

স্পিলিট বাটনের থিম ঠিক করাঃ
<ul data-role="listview" data-split-theme="b">

কলাপসিবল লিস্টের থিম ঠিক করাঃ
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<ul data-role="listview">
<li><a href="#">Agnes</a></li>
</ul>
</div>

ফর্মের থিম ঠিক করাঃ
<label for="name">Full Name:</label>
<input type="text" name="text" id="name" data-theme="b">

<label for="colors">Choose Favorite Color:</label>
<select id="colors" name="colors" data-theme="b">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>

কলাপসিবল ফর্মের থিম ঠিক করাঃ
<fieldset data-role="collapsible" data-theme="b" data-content-theme="b">
<legend>Click me - I'm collapsible!</legend>

নতুন থিম যুক্ত করাঃ
জেকোয়েরি মোবাইল আপনার মোবাইল পেজের জন্য নতুন থিম যুক্ত করতে দিবে ।
সিএসএস ফাইল এডিট করে করে নতুন থিম যুক্ত করতে পারবেন । স্টাইলের ব্লকগুলো কপি করে একে একটি বর্ণের নাম দিয়ে নামকরণ করবেন এবং আপনার সুবিধামত রঙ এবং ফন্ট দিবেন ।

এইচটিএমএল ডকুমেন্টে থিম ক্লাস ব্যবহার করে নতুন স্টাইল যোগ করতে পারবেন । যেমনঃ "ui-bar-(a-z)" ক্লাস টুলবারের জন্য, "ui-body-(a-z)" কনটেন্টের জন্য এবং ui-page-theme-(a-z) পেজের জন্য ব্যবহার করতে পারেন ।
<style>
.ui-bar-f {
color: red;
background-color: yellow;
}

.ui-body-f {
font-weight: bold;
color: white;
background-color: purple;
}

.ui-page-theme-f {
font-weight: bold;
background-color: green;
}
</style>

থিম রোলার নামে জেকোয়েরি মোবাইলের একটা থিম তৈরি করার টুলস আছে । জেকোয়েরি মোবাইল টিম এটা তৈরি করেছে । আপনি ইচ্ছা করলে এটা ব্যবহার করেও থিম আপনার মনের মত করে সাজাতে পারেন ।

Root

জেকোয়েরি মোবাইল ব্যবহার করে ফর্মে উপাদান যোগ করা ।

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল ব্যবহার করে ফর্মে উপাদান যোগ করা ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me

জেকোয়েরি মোবাইল তো আস্তে আস্তে আপনারা অনেক দূর শিখে ফেললেন । আজ আপনাদেরকে তাই অনেক গুরুত্বপূর্ণ বিষয় শেখাবো । আজ আমি আপনাদের জেকোয়েরি মোবাইল ব্যবহার করে ফর্মে উপাদান যোগ করা শিখাবো ।

জেকোয়েরি মোবাইলে টেক্সট ইনপুট করা ।
আমরা যেখানে টেক্সট ইনপুট করবো সেগুলো আদর্শ এইচটিএমএল দ্বারা তৈরি করা । জেকয়েরি মোবাইল একে মোবাইল ডিভাইসে ব্যবহার করার জন্য আরো আকর্ষণীয় এবং সহজ করে ডিজাইন করেছে । এছাড়া আপনি এইচটিএমএল ৫ এর <input> টাইপ ব্যবহার করতে পারবেন ।

<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">

উপরের উদাহরণটা আমরা ভালভাবে খেয়াল করলে বুঝতে পারবো ।

Text area ঃ
লেখা অনেক লাইনে লেখার জন্য আপনাকে <textarea> এলিমেন্টস ব্যবহার করতে হবে ।

<label for="info">Additional Information:</label>
<textarea name="addinfo" id="info"></textarea>

যখন আপনি লিখতে থাকবেন তখন লেখার জায়গাটা স্বয়ংক্রিয়ভাবে বৃদ্ধি করে নিবে ।

সার্চ ইনপুট করাঃ
এইচটিএমএল ৫ এ type="search" ইনপুট করা হয় নতুন কোন কিছু খোঁজার জন্য ।

<label for="search">Search:</label>
<input type="search" name="search" id="search">

উপরের উদাহরণ দেখুন তাহলেই বুঝবেন ।

রেডিও বাটনঃ
রেডিও বাটন ব্যবহার করা হয় কারণ ব্যবহারকারীরা অনেক গুলো অপশন থেকে একটি সিলেক্ট করতে পারে ।
রেডিও বাটনের সেট তৈরি করার জন্য আপনাকে অনুরুপ লেবেলের সাথে type="radio" ইনপুট ব্যবহার করতে হবে । রেডিও বাটনগুলো <fieldset> এলিমেন্টস এর সাথে মোড়ানো থাকে । <fieldset> কে নামকরণের জন্য এর সাথে <legend> এলিমেন্ট যোগ করতে পারেন ।

<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>

বাটনগুলোকে একসাথে গ্রুপ করার জন্য আপনাকে data-role="controlgroup" এলিমেন্ট ব্যবহার করতে হবে ।

চেকবক্সঃ
অনেকগুলো অপশন থেকে যখন ব্যবহারকারী একের অধিক অপশন সিলেক্ট করে তখন চেকবক্সের ব্যবহার করা হয় ।

<form method="post" action="demoform.asp">
<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>

চেকবক্সের উদাহরণটি খুব ভাল করে খেয়াল করুন ।

আরো উদাহরণঃ
গ্রুপ রেডিও বাটন অথবা চেকবক্সকে অনুভূমিকভাবে সাজাতে আপনাকে data-type="horizontal" ব্যবহার করতে হবে ।
<fieldset data-role="controlgroup" data-type="horizontal">

ফিল্ডের উপাদানগুলোকে <fieldset> ব্যবহার করে মোড়ানোর মত বানাতে পারেন ।
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>

অনেকগুলো বাঁটনকে সিলেক্ট দেখানোর জন্য <input> এর সাথে "pre-selected" ব্যবহার করতে হবে ।
<input type="radio" checked>
<input type="checkbox" checked>

আপনি চাইলে আপনার ফর্মের পাশে একটি পপ-আপও দেখাতে পারেন ।
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>

<div data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>

উদাহরণ গুলো খুব ভালভাবে খেয়াল করুন তাহলে সব কিছু ভালভাবে বুঝতে পারবেন এবং আপনার মত করে সাজাতে পারবেন ।

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো ।

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো ।
লেখাঃ মোস্তাফিজুর ফিরোজ ।
ফেসবুকঃ www.fb.com/mfir0z

কি খবর সবার? অনেকদিন পর আবার নতুন পোস্ট নিয়ে হাজির হচ্ছি । আজ আমি জেকোয়েরি মোবাইল ব্যবহার করে লিস্টের উপাদানসমূহকে নিজের মত করে সাজানো শেখাবো ।

জেকোয়েরি মোবাইলের লিস্টের আইকনকে সাজানো (jQuery Mobile List Icons)ঃ
ডিফল্টভাবে লিস্টে একটা করে ডানমূখী তীর "carat-r" এট্রিবিউট ব্যবহার করে আইকন হিসেবে থাকে । আপনি একে আপনার পছন্দমত আইকন দিয়ে সাজাতে পারবেন । তাই আপনি যে আইকনকে আপনার মত করে সাজাতে চান তাতে data-icon এট্রিবিউট ব্যবহার করতে হবে ।

<ul data-role="listview">
<li><a href="#">Default is right arrow</a></li>
<li data-icon="plus"><a href="#">data-icon="plus"</a></li>
<li data-icon="minus"><a href="#">data-icon="minus"</a></li>
<li data-icon="delete"><a href="#">data-icon="delete"</a></li>
<li data-icon="location"><a href="#">data-icon="location"</a></li>
<li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

আপনি উপরের মত করে আইকনগুলোকে সাজাতে পারবেন । আপনি যদি চান কোনো আইকন দেখাবেন না তাহলে আপনাকে data-icon="false" এট্রিবিউট ব্যবহার করতে হবে ।

16x16 Iconsঃ
আইকনের স্টান্ডার্ড সাইজ হলো 16x16px । তাই এই সাইজের আইকন ব্যবহার করার জন্য <img> এলিমেন্ট(<img> element) কে "ui-li-icon" ক্লাসের সাথে যুক্ত করতে হবে ।

উদাহরণটি দেখুন তাহলেই বুঝতে পারবেন ।

জেকোয়েরি মোবাইল লিস্ট থাম্বনেইলস(jQuery Mobile List Thumbnails)ঃ
কোনো আইকনের ইমেজ সাইজ যদি 16x16px এর বেশি হয় তাহলে তো সমস্যা দেখা দিবে আর অসুন্দর দেখাবে । তাই <img> এলিমেন্টকে লিস্টের প্রথম চাইল্ড এলিমেন্ট(first child element) এর সাথে বসাতে হবে । এর সাথে কোনো ক্লাস নেম ব্যবহার করা লাগবে না । তাহলে দেখবেন যে ইমেজগুলো স্বয়ংক্রিয়ভাবে 80x80px সাইজের হয়ে যাবে । নিচের উদাহরণটি দেখুন তাহলেই বুঝবেন ।

আপনি স্টান্ডার্ড এইচটিএমএল(standard HTML) ব্যবহার করে লিস্টে তথ্য যুক্ত করতে পারেন । নিচের মত করে আপনি যুক্ত করতে পারেন ।
<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>

স্পিলিট বাটনস(Split Buttons)ঃ
আপনি যদি লম্বালম্বি ডিভাইডার বার(vertical divider bar) ব্যবহার করে স্পিলিট লিস্ট(split list) তৈরি করতে চান তাহলে লিংক দুটোকে <li> element এর সাথে ব্যবহার করতে হবে । জেকোয়েরি মোবাইল দ্বিতীয় লিংককে ডান সাইডে একটি ডানমূখী তীরের সাহায্যে বসাবে । এবং ব্যবহারকারীরা যখন ঐ আইকনে মাউস পয়েন্টার রাখবে তখন টেক্সটের সাথে যদি কোনো লিংক থাকে তাহলে সেটা দেখাবে ।

এটাকে আরো বেশি ফাংশন সমৃদ্ধ করতে কিছু পেজ এবং ডায়লগ বক্স কিভাবে যোগ করতে হবে তা দেখি ।
<ul data-role="listview">
<li>
<a href="#"><img src="chrome.png"></a>
<a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
</li>
</ul>

কাউন্ট বাবল(Count Bubble) এর ব্যবহারঃ
আমাদের যখন মেইলবক্সে কোনো মেইল আসে তখন একটা বাবলে কয়টি নতুন ম্যাসেজ এসেছে তার সংখ্যা উল্লেখ করে দেখায় । আপনিও ইচ্ছা করলে আপনার লিস্টে এমন দেখাতে পারবেন জেকোয়েরি ব্যবহার করে । এজন্য আপনাকে ইনলাইন এলিমেন্ট(inline element) যেমন <span> কে "ui-li-count" ক্লাসের সাথে ব্যবহার করে একটি সংখ্যা উল্লেখ করে দিতে হবে ।
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

উপরের মত করে ব্যবহার করুন তাহলে বুঝতে সুবিধা হবে । আর হ্যা, যদি কাউন্ট বাবলে সঠিক কাউন্ট দেখাতে চান তাহলে একে আরো প্রোগ্রাম দ্বারা আপডেট করতে হবে । তার জন্য আপনাকে আরো অনেক কিছু শিখতে হবে । চিন্তা নেই, আজ এটুকু শিখতে থাকুন পরের পোস্টে আমি এটা নিয়ে হাজির হয়ে যাবো ।

Root

জেকোয়েরি মোবাইল বাটনে আইকন সাজানো ।

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল বাটনে আইকন সাজানো ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

জেকোয়েরি মোবাইল এক ঝাঁক আইকন প্রদান করে যা আপনার বাঁটনকে করে তোলে আরো আকর্ষণীয় ।

জেকোয়েরি মোবাইল বাটোনে আইকন যোগ করাঃ
বাটনে আইকন যোগ করার জন্য ui-icon ক্লাস ব্যবহার করতে হবে এবং একে পজিশন করার জন্য ui-btn-icon-pos ক্লাস ব্যবহার করতে হবে ।
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

অন্যান্য বাটোনের জন্য যেমন লিস্ট বাটন এবং ফর্ম বাটনের জন্য আপনাকে data-icon এট্রিবিউট ব্যবহার করতে হবে । এটা পরে আমরা আরো বিস্তারিত আলোচনা করবো ।

নিচে আমরা জেকয়েরি মোবাইলের কিছু আইকন সম্পর্কে আলোচনা করবো ঃ

আইকন ক্লাসঃ ui-icon-arrow-r
আইকনের বর্ণনাঃ ডানমূখী তীর ।

আইকন ক্লাসঃ ui-icon-arrow-l
আইকনের বর্ণনাঃ বামমূখী তীর ।

আইকন ক্লাসঃ ui-icon-delete
আইকনের বর্ণনাঃ ডিলিট আইকন ।

আইকন ক্লাসঃ ui-icon-info
আইকনের বর্ণনাঃ ইনফরমেশন আইকন ।

আইকন ক্লাসঃ ui-icon-audio
আইকনের বর্ণনাঃ স্পীকার আইকন ।

আইকন ক্লাসঃ ui-icon-back
আইকনের বর্ণনাঃ ব্যাক আইকন ।

আইকন ক্লাসঃ ui-icon-search
আইকনের বর্ণনাঃ সার্চ আইকন ।

আইকন ক্লাসঃ ui-icon-lock
আইকনের বর্ণনাঃ তালার আইকন ।

আইকন ক্লাসঃ ui-icon-grid
আইকনের বর্ণনাঃ গ্রিড আইকন ।

আইকন ক্লাসঃ ui-icon-alert
আইকনের বর্ণনাঃ সংকেত আইকন ।

আইকন ক্লাসঃ ui-icon-home
আইকনের বর্ণনাঃ হোম আইকন ।

আইকনের পজিশন করাঃ
আপনি চার জায়গায় আইকন বসাতে পারবেন তা হলো সবার উপরে, সবার নিচে , সবার বামে এবং সবার ডানে । এজন্য আপনাকে ui-btn-icon ক্লাস ব্যবহার করতে হবে ।

বাটনে লিংক যোগ করাঃ
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>

আপনি উল্লেখিত স্থানে লিংক বসাতে পারবেন । মনে রাখবেন, আপনি যদি আইকনের পজিশন যদি না বলে দেন তাহলে কিন্তু আইকনকে দেখাবে না ।

শুধু আইকন দেখানোঃ
আপনি ইচ্ছা করলে লেখা না দেখিয়ে শুধু আইকন দেখাতে পারেন । এজন্য আপনাকে আইকন পজিশন করার জন্য "notext" ভেলু ব্যবহার করতে হবে ।
a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>

এভাবে "notext" ভেলু ব্যবহার করে শুধু আইকন দেখাতে পারবেন ।

বেষ্টনী দূর করাঃ
ডিফল্টভাবে সকল আইকনের চারিদিকে ধূসর বেষ্টনী থাকে । এই বেষ্টনী দূর করার জন্য আপনাকে "ui-nodisc-icon" ক্লাস ব্যবহার করতে হবে ।

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-nodisc-icon">Without circle</a>

সাদা আইকনকে কালো করাঃ
ডিফল্টভাবে সকল আইকন সাদা রঙের হয় । এই সাদা আইকনকে কালো করার জন্য আপনাকে "ui-alt-icon" এলিমেন্ট যোগ করতে হবে ।

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-alt-icon">Black</a>

এভাবে আপনার ইচ্ছা খুশি মত আইকনকে সাজাতে পারবেন । খুবই সহজ তাই নাহ? 😉

Root

জেকোয়েরি দিয়ে মোবাইল বাটনস তৈরি ।

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি দিয়ে মোবাইল বাটনস তৈরি ।
লেখকঃ মোস্তাফিজুর ফিরোজ ।

মোবাইলের অ্যাপ্লিকেশন গুলো এতটাই সহজভাবে তৈরি করা হয় যে আপনি খুব সহজে টোকা মেরেই এর ডিসপ্লেতে চালাতে পারেন ।

জেকোয়েরি মোবাইল দিয়ে বাটন তৈরিঃ

জেকোয়েরি দিয়ে তিনভাবে বাটন তৈরি করা যায় ।
১। <input> element ব্যবহার করে ।
২। <button> element এর সাথে class="ui-btn" ক্লাস ব্যবহার করে ।
৩। <a> element এর সাথে class="ui-btn" ক্লাস ব্যবহার করে ।

ইনপুট এলিমেন্টের ব্যবহারঃ
<input type="button" value="Button">

<button> element এর ব্যবহারঃ
<button class="ui-btn">Button</button>

<a> element এর ব্যবহারঃ
<a href="#anylink" class="ui-btn">Button</a>

জেকোয়েরি মোবাইলে বাটন গুলো অটোমেটিক্যালি ডিজাইন করা থাকে । কম্পিউটার এবং মোবাইলে দেখানোর জন্য এগুলোকে ডিজাইন করে নিতে হয় । <a> element এর সাথে class="ui-btn" ক্লাস ব্যবহার করে পেজের সাথে লিংক করা হয় । আর <input> অথবা <button> elements ফর্ম সাবমিশনে ব্যবহার করা হয় ।

নেভিগেশন বাটনসঃ
পেজের সাথে বাটনের লিংক করার জন্য <a> element এর সাথে class="ui-btn" ব্যবহার করা হয় ।

গুরুপ বাটনসঃ
জেকোয়েরি মোবাইল গুরুপ বাটন গুলোকে একসাথে করার জন্য একটি সহজ পদ্ধতি প্রদান করেছে ।
data-role="controlgroup" কে data-type="horizontal|vertical" এর সাথে যোগ করে দেখানো যায় যে গুরুপ বাটন টা আড়াআড়িভাবে নাকি লম্বালম্বিভাবে দেখাবে ।
নিচের উদাহরণ টা দেখিঃ
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
<a href="#" class="ui-btn">Button 3</a>
</div>

ডিফল্টভাবে গুরুপ বাটন গুলো লম্বালম্বিভাবে দেখায় এবং তাদের ভিতর কোনো মার্জিন বা ফাঁকা থাকে না । এবং প্রথম এবং শেষ বাটনে গোলাকার কোণা থাকে । যখন এটা ওপেন হয় তখন এটাকে দেখতে খুব সুন্দর লাগে ।

ব্যাক বাটনসঃ
data-rel="back" এট্রিবিঊট ব্যবহার করে খুব সহজেই ব্যাক বাটন তৈরি করা যায় ।
<a href="#" class="ui-btn" data-rel="back">Go Back</a>

এতে কিন্তু anchor's href value কে গুরুত্ব দেয়া হয় না ।

ইনলাইন বাটনসঃ
ডিফল্টভাবে বাটন গুলো স্ক্রিনের পুরো জায়গা জুড়ে থাকে । আপনি "ui-btn-inline" ক্লাস ব্যবহার করে বাঁটনকে নির্দিস্ট মাপে দেখাতে পারবেন । আপনি ইচ্ছা করেলে দুই বা ততোধিক বাঁটনকে এভাবে দেখাতে পারেন ।
<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>

বাটনের সাথে লিংক করার জন্য আরো সিএসএস ক্লাসঃ

ক্লাসের নামঃ ui-btn-b
বর্ণনাঃ ডিফল্টভাবে ধূসর ব্যাকগ্রাউন্ডের সাথে কালো লেখাকে পরিবর্তন করে কালো ব্যাকগ্রাউন্ডের সাথে সাদা লেখায় পরিণত করে ।

ক্লাসের নামঃ ui-corner-all
বর্ণনাঃ বাটনের চারিদিকে গোলাকার কোণা তৈরি করে ।

ক্লাসের নামঃ ui-mini
বর্ণনাঃ বাঁটনকে ছোট করে ফেলে ।

ক্লাসের নামঃ ui-shadow
বর্ণনাঃ বাটনে ছায়া যোগ করে ।

আপনি যদি একের অধিক ক্লাস ব্যবহার করতে চান তাহলে স্পেস ব্যবহার করে সেটা করতে পারবেন ।
class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

এভাবে স্পেস দিয়ে দুটির বেশি ক্লাস ব্যবহার করতে পারেন ।

ডিফল্টভাবে <input> বাটনে ছায়া এবং গোলাকার কর্ণার থাকে । কিন্তু <a> এবং <button> element এ থাকে নাহ ।

তাহলে এভাবেই চর্চা করতে থাকুন । আস্তে আস্তে সব শিখে ফেলবো একসাথে । 😀

jQuery Mobile । জেকুএরি মোবাইল

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

March 16, 2015 Author-Check- Article-or-Video

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।

লেখকঃ মোস্তাফিজুর ফিরোজ ।
মেইলঃ me@firoz.me
ওয়েবসাইটঃ www.firoz.me