কিভাবে ফর্ম কে validate করতে হয় তা আমরা এক এক করে কোড এর মাধ্যমে দেখব এবং তার বর্ণনা দেখব
টেক্সট ফিল্ডের এর এইচটিএমএল ফর্ম
Name:
E-mail:
Website:
Comment:
Gender:
Female
Male
Feb 07
কিভাবে ফর্ম কে validate করতে হয় তা আমরা এক এক করে কোড এর মাধ্যমে দেখব এবং তার বর্ণনা দেখব
Name:
E-mail:
Website:
Comment:
Gender:
Female
Male
Feb 07
PHP তে আমরা কোন variable ঘোষণা করলে তা $ চিহ্ন দিয়ে প্রকাশ করে থাকি। আমরা যদি if-else statement এর কাজ করতে যাই তাহলে আমাদের এই চিহ্ন নিয়ে কাজ করতে হবে। কোন উদাহরন দেওয়ার আগে আমরা একটু if-else বিষয় টা বুঝে নেই।
পিএইচপি ফাইল রান করার ক্ষেত্রে আমাদের অনেক condition থাকতে পারে if-else এর মাধ্যমে আমরা সেই condition গুলো প্রকাশ করতে পারি এবং প্রিন্ট করতে পারি।
< ?php
$t = date("H"); /*variable ঘোষণা করেছি */
if ($t < "20") /*এর মাধ্যমে আমরা শর্ত দিয়ে দিয়েছি*/
{
echo "Have a good day!"; /*এবং শর্ত যদি মিলে তাহলে তা প্রিন্ট করবে */
}
?>
যদি আমরা if এর সাথে else ব্যবহার করি তাহলে দেখুন
< ?php
$t = date("H"); /*variable ঘোষণা করেছি */
if ($t < "20") /*এর মাধ্যমে আমরা শর্ত দিয়ে দিয়েছি*/
{
echo "Have a good day!"; /*এবং শর্ত যদি মিলে তাহলে তা প্রিন্ট করবে */
}
else {
echo "Have a good night!";/*যদি শর্ত না মিলে তাহলে এটা প্রিন্ট হবে*/
}
অনেক সময় অনেকগুলো if-else ব্যবহার করতে হতে পারে।
$t = date("H"); /*এই কোড এর মাধ্যমে খুঁজে পাবে দিনের ঘণ্টা*/
if ($t < "10") /*প্রথম শর্ত দেওয়া হল*/ {
echo "Have a good morning!";/*শর্ত মিললে এটি প্রকাশ করবে।*/
} elseif ($t < "20")/*যদি না মিলে তাহলে দ্বিতীয় শর্ত প্রকাশ করা হোল*/ {
echo "Have a good day!"/*দ্বিতীয় শর্ত মিললে এটা প্রকাশ করবে। */;
} else {
echo "Have a good night!/*যদি কোনটাই না মিলে তাহলে এটি প্রিন্ট করবে।*/";
}
?>
নোটপ্যাড ওপেন করে এই example টুকু টাইপ করে ফাইল টি সেভ করুন if-else.php extension দিয়ে। আপনার ফাইল টি localhost > htdocs> test ফোল্ডার এর ভিতর রাখুন। ব্রাউজার ওপেন করে এড্রেস বারে লিখুন localhost/test/if-ese.php. Go বাটন এ ক্লিক করলে একটি ফলাফল আপনি খুজে পাবেন।
Feb 06
Ali Hossain
Student of English Literature, Jahangirnagar University.
আজাকে আমরা পিএইচপি মাইএসকিউল ডাটাবেজ এর সম্পর্কে জানব। PHP (পিএইচপি) ব্যবহার করে আপনি ডাটাবেজের সাথে সংযোগ করতে পারবেন এবং তা নিপূনভাবে পরিচালনা করতে পারবেন। MySQL (মাইএসকিউল) হচ্ছে সবচেয়ে জনপ্রিয় ডাটাবেজ সিস্টেম যেটা পিএইচপি এর সাথে ব্যবহৃত হচ্ছে।
১. মাইএসকিউল একটা ডাটাবেজ সিস্টেম যেটা ওয়েব এ ব্যবহার করা হয় এবং সার্ভারে পরিচালনা করা হয়।
২. মাইএসকিউল ছোট এবং বড় উভয়ের জন্য আদর্শ ডাটাবেজ সিস্টেম।
৩. মাইএসকিউল খুব দ্রত, নির্ভরযোগ্য এবং সহজে ব্যবহার করা যায়।
৪. মাইএসকিউল মানসম্পন্ন এসকিউল ব্যবহার করে।
৫. মাইএসকিউল কয়েকটি প্লাটফর্মের উপর প্রনয়ন করা হয়েছে।
৬. মাইএসকিউল ওরাকল দারা উন্নতকরন, বিতরন এবং সমর্থিত এবং এটি বিনামূল্যে ডাউনলোড করে ব্যবহার করা যাবে।
৭. মাইএসকিউল এর সহ-প্রতিষ্ঠাতা Monty Widenius (মন্টি উইডেনিয়াস) এর মেয়ের নামে নামকরন করা হয়।
মাইএসকিউল ডাটাবেজের ডাটা টেবিলে জমা রাখা হয়। মাইএসকিউলে একটি টেবিল হলো সংশ্লিষ্ট তথ্যের ভান্ডার যেটি কলাম ও সারির সমন্নয়ে গঠিত। ডাটাবেজ নিরপেক্ষভাবে তথ্য সংরক্ষনের জন্য দরকারী। একটি কোম্পানির নিম্মলিখিত টেবিলের সমন্নয়ে ডাটাবেজ থাকতে পারে :
১. কর্মচারী
২. পন্য
৩. গ্রাহক
৪. আদেশ
মাইএসকিউএল এর সঙ্গে মিলিত পিএইচপি হলো ক্রস প্ল্যাটফর্ম (যা আপনি উইন্ডোজে উন্নত করে একটি ইউনিক্স প্ল্যাটফর্মের উপর ব্যবহার করতে পারেন)।
অনুসন্ধান হলো একটি প্রশ্ন বা অনুরোধ। আমরা নির্দিষ্ট তথ্যের জন্য ডাটাবেজ অনুসন্ধান করতে পারি এবং রেকর্ডসেট ফিরে পেতে পারি।
নিচের অনুসন্ধানটি দেখুন (মানসম্পন্ন এসকিউল ব্যবহারে তৈরি):
SELECT LastName FROM Employees
উপরের অনুসন্ধানটি “Employees” টেবিলের “LastName” কলামের সকল ডাটাকে নির্বাচন করবে। আরো শিখতে এসকিউএল এর সবার নিচের লিঙ্কে ভ্রমন করুন।
আপনার যদি পিএইচপি সার্ভার যুক্ত মাইএসকিউল ডাটাবেজ না থাকে, তাহলে এখান থেকে বিনামূল্যে ডাউনলোড করুন : http://www.mysql.com
মাইএসকিউল (ফেসবুক, টুইটার এবং উইকিপিডিয়ার মত) তথ্য এবং শেষ ব্যবহারকারীদের বিপুল ভলিউমের ওয়েব সাইটের জন্য একটি de-facto মানসম্পন্ন ডাটাবেজ সিস্টেম। মাইএসকিউএল সম্পর্কে আরেকটি বড় ব্যাপার হল এটার সংখ্যা কমিয়ে আনা যায় যা এমবেডেড ডাটাবেসের অ্যাপ্লিকেশন সমর্থন করে। মাইএসকিউল ব্যবহার করে কোম্পানির ওভারভিউ দিতে দেখুন : http://www.mysql.com/customers/
Feb 05
আক্তারুজ্জামান
Department of CSE,University of Chittagong
যে কোন প্রুগ্রামিং ল্যাঙ্গুয়েজে স্ট্রিং এর উপর পরিষ্কার ধারনা থাকাটা খুবয় জরুরি। একটা স্ট্রিং তৈরি হয় এক বা একাধিক ক্যারেক্টার মিলে । সোজা কথায় স্ট্রিং হচ্ছে ক্যারেক্টারের সমষ্টি ।
যেমন “Hello World” হচ্ছে একটি স্ট্রিং।
পিএইচপিতে স্ট্রিং মেনিপুলেট করার অনেক ফাংশন রয়েছে। নিচে কিছু কমন ফাংশনের বর্ণনা দেওয়া হয়েছে।
strlen() ফাংশনের মাধ্যমে স্ট্রিং এর দৈর্ঘ্য বের করতে হয়, নিচে উদাহরন দেওয়া হল।
উদাহরণঃ
< ?php $text = “Hello World!” echo strlen($text); // outputs 12 ?>
এই কোডটার আউটপুট হবে 12
স্ট্রিং এর ওয়ার্ড এর সংখ্যা বের করার জন্য str_word_count() ফাংশনটা ব্যাবহার করা হয়
উদাহরণঃ
< ?php $text = “Hello World!” echo str_word_count($text);// outputs 2 ?>
এই কোডটার আউটপুট হবে 2
strrev()ফাংশনের মাধ্যমে একটি স্ট্রিং কে রিভার্স করা যায়।
উদাহরণঃ
< ?php
echo strrev("Hello world!"); // outputs !dlrow olleH
?>
আউটপুট হবে !dlrow olleH।
strpos()ফাংশন এর মাধ্যমে এই কাজটি করা হয়।
উদাহরণঃ
< ?php
echo strpos("Hello world!", "world"); // outputs 6
?>
আউটপুট হবে 6 যেহেতু “Hello world!” এ “world” এর পজিশন 6।
স্ট্রিং এ টেক্সট রিপ্লেস করাঃ
এই কাজটি করতে হয় str_replace() ফাংশনের মাধ্যমে।
উদাহরণঃ
< ?php
echo str_replace("world", "Dolly", "Hello world!"); // outputs Hello Dolly!
?>
এই কোডটির আউটপুট হবে
Hello Dolly!
Feb 04
Author: Protap Chandra | sincerely.yours2512[at]gmail.com
ডাটাবেজ সিস্টেমে ডাটা তল্লাশি বা সার্চ করার ক্ষেত্রে wildcard (ওয়াইল্ডকার্ড) একটি গুরুত্বপূর্ণ টার্ম। স্ট্রিং ডাটার কোনো অংশ ’অজ্ঞাত’ উল্লেখ করে ডাটা তল্লাশি করতে ওয়াইল্ডকার্ড ব্যবহার করা হয়। এই অজ্ঞাত অংশ এক থেকে বহু character (অক্ষর) পর্যন্ত হতে পারে।
একটি টেবিলের ভেতর থেকে ডাটা তল্লাশি করার জন্য এসকিউএল LIKE অপারেটরের সঙ্গে ওয়াইল্ডকার্ড character ব্যবহার করা হয়। SQL এ ব্যবহৃত wildcard গুলো হচ্ছে:
| Wildcard |
Description |
|
% |
শুন্য কিংবা যে কোনো এক বা একাধিক character খুঁজতে ব্যবহার করা হয় |
|
_ |
একটিমাত্র character খুঁজতে ব্যবহার করা হয় |
|
[charlist] |
একাধিক character এর লিস্ট উল্লেখ করা হয় যেগুলো দিয়ে শুরু হওয়া ডাটা বাছাই করে |
|
[^charlist] |
একাধিক character এর লিস্ট উল্লেখ করা হয় যেগুলো বাদ রেখে অন্য সব অক্ষর দিয়ে শুরু হওয়া ডাটা বাছাই করে |
এই টিউটিরিয়ালে আমরা Northwind স্যাম্পল ডাটাবেজটি ব্যবহার করব, যেটি মাইক্রোসফট Excel এবং MS SQL Server এর সাথে শিক্ষার্থীদের জন্য তৈরী অবস্থায় (readymade) সংযুক্ত করা থাকে। সেই ডাটাবেজের "Customers" টেবিল থেকে কিছু ডাটা নির্বাচন করা হল:
| CustomerID |
CustomerName |
ContactName |
Address |
City |
PostalCode |
Country |
|
1 |
Alfreds Futterkiste |
Maria Anders |
Obere Str. 57 |
Berlin |
12209 |
Germany |
|
2 |
Ana Trujillo Emparedados y helados |
Ana Trujillo |
Avda. de la Constitución 2222 |
México D.F. |
05021 |
Mexico |
|
3 |
Antonio Moreno Taquería |
Antonio Moreno |
Mataderos 2312 |
México D.F. |
05023 |
Mexico |
|
4 |
Around the Horn |
Thomas Hardy |
120 Hanover Sq. |
London |
WA1 1DP |
UK |
|
5 |
Berglunds snabbköp |
Christina Berglund |
Berguvsvägen 8 |
Luleå |
S-958 22 |
Sweden |
নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "ber" দিয়ে।
SELECT * FROM Customers
WHERE City LIKE ‘ber%’;
নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নামের মাঝে কোথাও "es" আছে:
SELECT * FROM Customers
WHERE City LIKE ‘%es%’;
নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে যেকোন অক্ষর দিয়ে, কিন্তু তার পরের অবস্থানেই "erlin" আছে:
SELECT * FROM Customers
WHERE City LIKE ‘_erlin’;
নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে “L” দিয়ে, তারপরের অবস্থানে যেকোন অক্ষর, তার পরের অবস্থানে “n”, তার পরের অবস্থানে যেকোন অক্ষর, তার পরেই একসাথে থাকবে "on".
SELECT * FROM Customers
WHERE City LIKE ‘L_n_on’;
নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "b", "s" কিংবা "p" দিয়ে।
SELECT * FROM Customers
WHERE City LIKE ‘[bsp]%’;
নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "a", "b" কিংবা "c" দিয়ে।
SELECT * FROM Customers
WHERE City LIKE ‘[a-c]%’;
নিচের SQL স্টেটমেন্টটি customers টেবিল থেকে সেইসকল কাস্টমারদের তথ্য তুলে আনবে যাদের City এর নাম শুরু হয়েছে "b", "s" কিংবা "p" বাদ দিয়ে।
SELECT * FROM Customers
WHERE City LIKE ‘[!bsp]%’;
or
SELECT * FROM Customers
WHERE City NOT LIKE ‘[bsp]%’;
Feb 04
আক্তারুজ্জামান
Department of CSE, University of Chittagong
ভেরিয়েবল বিভন্ন রকমের ডাটা স্টোর করতে পারে, এবং বিভন্ন ডাটা টাইপ বিভন্ন রকম কাজ করে। পিএইচপি নিচে উল্লেখিত ডাটা টাইপ গুলো সাপোর্ট করে।
স্ট্রিং তৈরি হয় এক বা একাধিক ক্যারেক্টার মিলে । সোজা কথায় স্ট্রিং হচ্ছে ক্যারেক্টারের সমষ্টি । যেমনঃ “Hello World” হচ্ছে একটি স্ট্রিং।
ডাবল কিংবা সিঙ্গল কোট ব্যবহার করে স্ট্রিং (string) ভেরিয়েবল তৈরি করতে হয়।
উদাহরণঃ
<?php $x = "Hello world!"; $y = 'Hello world!'; echo $x; echo "<br>"; echo $y; ?>
এইখানে $x এবং y হল দুটি string টাইপ ভেরিয়েবল
ইন্টিজার মানে হল পূর্ণ সংখ্যা । এইটি -2,147, 483, 648 এবং +2, 147, 483, 647 এর মধ্যে যে কোন একটি সংখ্যা হতে পারে। নিচের উদাহরণে $x হল একটি ইন্টিজার (integer) টাইপের ভেরিয়েবল।
<?php $x = 5985; var_dump($x); ?>
var_dump() ফাংশনটি ডাটা টাইপ এবং মান রিটার্ন করে।
ফ্লোট হল একটি decimal point নাম্বার। নিচের উদাহরণে $x হল একটি ফ্লোট টাইপের ভেরিয়েবল।
<?php $x = 10.365; var_dump($x); ?>
কোন কিছু সত্য না মিথ্যা তা প্রকাশ করার জন্য বুলিয়ান ডাটা টাইপটি ব্যাবহার করা হয়।বুলিয়ান এর দুইটি মান হতে পারে – true অথবা false
উদাহরনঃ
$x = true $y = false
একটি সিঙ্গেল ভেরিয়েবলে একের অধিক মান স্টোর করার জন্য এ্যারে ব্যাবহার করা হয়। নিচের উদাহরণে $cars হল একটি এ্যারে।
<?php
$cars = array("Volvo","BMW","Toyota");
var_dump($cars);
?>
এইখানে $cars এ্যারেতে তিনটি স্ট্রিং টাইপের মান রয়েছেঃ
Volvo, BMW এবং Toyota।
কোন নির্দিষ্ট একটি ক্লাসের instance কে অবজেক্ট বলা হয়। অবজেক্ট হচ্ছে ভেরিয়েবল এবং ফাংশন এর সমস্টি। অবজেক্ট ইন্সট্যান্স তৈরি করতে হয় new কিওয়ার্ডটি ব্যবহার করে।
উদাহরনঃ
<?php
class Car {
function Car() {
$this->model = "VW";
}
}
// create an object
$herbie = new Car();
// show object properties
echo $herbie->model;
?>
নাল একটি বিশেষ ধরণের ডাটা টাইপ যেটার মান হতে পারে শুধুমাত্র একটি- এবং এইটি হল null । একটি ভেরিয়েবলে কোন মান এসাইন করা না হলে ওইটাকে নাল ডাটা টাইপের ভেরিয়েবল বলা হয়।
উদাহরনঃ
<?php
$x = “Hello world!”;
$x = null;
var_dump($x);
?>
এইখানে $x হল একটি নাল টাইপের ভেরিয়েবল।
Feb 04
লিখছেন সুদীপ্ত সাহা
জেক্যুয়েরি মোবাইল পপআপস
পপআপ হল অনেকটা বার্তার মতো, যেগুলো একটি পেজের কোন অংশের ওপর দিয়ে আস্তরনের মতো বিস্তৃত হয়। ছোট কোন টেক্সট, ইমেজ, ম্যাপ বা অন্য কোন কন্টেন্ট প্রদর্শনের জন্য পপআপ বক্স উপযোগী।
পপআপ তৈরি করার জন্য ইলিমেন্ট এবং
উদাহরনঃ
Show Popup
This is a simple popup.
আপনার পপআপ বক্সে অতিরিক্ত প্যাডিং বা মার্জিন অ্যাট্রিবিউট ব্যবহার করতে চাইলে
উদাহরনঃ
পপআপ ক্লোজিং
পপআপ বক্সের বাইরে ক্লিক করলে অথবা “Esc” কী প্রেস করলে স্বয়ংক্রিয়ভাবে একটি পপআপ শেষ হয়ে যায় বা বন্ধ হয়ে যায়। কিন্তু পপআপ বক্সের বাইরে ক্লিক করলে পপআপ বন্ধ হয়ে যাবে, এরকম যদি আপনি না চান তাহলে আপনি পপআপে অ্যাট্রিবিউট data-dismissible=”false” অ্যাড করতে পারেন (প্রয়োজনীয় নয়)। পপআপের ডানে অথবা বামে অথবা অন্য কোন দিকে আপনি একটি ক্লোজ বাটনও অ্যাড করতে পারেন। এর জন্য পপআপ কন্টেইনারে বাটন লিঙ্ক অ্যাট্রিবিউট data-rel=”back” অ্যাড করতে হবে এবং বাটনের অবস্থান সিএসএস ক্লাসে নির্দিষ্ট করে দিতে হবে।
রাইট ক্লোজ বাটনের উদাহরনঃ
Show Popup
লেফট ক্লোজ বাটনের উদাহরনঃ
Show Popup
আনডিসমিসেবল পপআপের উদাহরনঃ
Show Popup
পজিশনিং পপআপ
পপআপগুলো স্বয়ংক্রিয়ভাবে একেবারে ক্লিকড ইলিমেন্টের উপরেই প্রদর্শিত হয়। কিন্তু পপআপের অবস্থান নিয়ন্ত্রণের জন্য যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-position-to অ্যাট্রিবিউট ব্যবহার করতে হয়।
পপআপের অবস্থান নিয়ন্ত্রণের তিনটি পদ্ধতি হলঃ
অ্যাট্রিবিউট ভ্যালু বর্ণনা
data-position-to=”window” পপআপ উইন্ডোর মাঝে প্রদর্শিত হবে
data-position-to=”#myId” কোন নির্দিষ্ট id’র বর্ণনার অবস্থান অনুসারে পপআপ প্রদর্শিত হবে
data-position-to=”origin” ডিফল্ট পপআপ সরাসরিভাবে ক্লিকড ইলিমেন্টের উপর প্রদর্শিত হবে
উদাহরনঃ
Window
id=”demo”
Origin
ট্রানজিশনস
পপআপের সাথে স্বয়ংক্রিয়ভাবে কোন ট্রানজিশন ইফেক্ট অ্যাড করা থাকে না। ট্রানজিশন চ্যাপ্টারে বর্ণিত ইফেক্টগুলোর যেকোনোটি আপনি ব্যবহার করতে পারেন। শুধুমাত্র যেই লিঙ্ক পপআপ ওপেনের জন্য ব্যবহৃত হবে সেই লিঙ্কে data-transition=”value” অ্যাট্রিবিউট অ্যাড করতে হবে।
সকল ট্রানজিশন ইফেক্টের জন্য একটি ড্যামো দেখানো হলঃ
Fade
পপআপ অ্যারো
পপআপের বর্ডারের মধ্যে কোন অ্যারো ব্যবহারের জন্য data-arrow অ্যাট্রিবিউট অ্যাড করতে হয় এবং লেফট এর জন্য “l” রাইটের জন্য “r” টপের জন্য “t” বোটমের জন্য “b” নির্দিষ্ট করে দিতে হয়।
উদাহরনঃ
Open Popup
There is an arrow on my LEFT border.
পপআপ ডায়ালগ
আপনি একটি মানসম্মত বা পছন্দস্বরূপ কোন ডায়ালগ আপনার পপআপে অ্যাড করতে পারেন (হেডার, ফুটার এবং কন্টেন্ট মার্কআপ)
উদাহরনঃ
Open Dialog Popup
পপআপ ফটো
পপআপে কোন ইমেজও প্রদর্শন করতে পারবেন।

Feb 03
অ্যাংগুলার-জেএস অ্যাপ্লিকেশন
Sheikh Mahfuzur Rahman
অ্যাংগুলার-জেএস অ্যাপ্লিকেশন
আপনি পূর্বের সবগুলো টিউটোরিয়াল পড়ে থাকলে, একটি প্রকৃত অ্যাংগুলার-জেএস সিংগেল পেজ অ্যাপ্লিকেশন(SPA) তৈরির জন্য এটাই উপযুক্ত সময়!
একটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের উদাহরণ
আশা করি পূর্বের টিউটোরিয়ালগুলো পড়ে আপনি আপনার প্রথম অ্যাংগুলার-জেএস অ্যাপ্লিকেশন তৈরির জন্য যথেষ্ট কৌশল শিখে নিয়েছেনঃ
My Note
Number of characters left: 100
উদাহরণসহ অ্যাপ্লিকেশনটির ব্যাখ্যাঃ
myNoteApp”>
<head>
</head>
<body>
myNoteCtrl”>
<h2>My Note</h2>
<textarea ng-model=”message” cols=”40″ rows=”10″>
<p>
<button ng-click=”save()”>Save</button>
<button ng-click=”clear()”>Clear</button>
</p>
<p>Number of characters left: <span ng-bind=”left()”></span></p>
</div>
<script src=”myNoteApp.js”></script>
<script src=”myNoteCtrl.js”></script>
</body>
</html>
অ্যাপ্লিকেশন ফাইলটি হলো “myNoteApp.js”:
var app = angular.module(“myNoteApp”, []);
কন্ট্রোলার ফাইলটি হলো “myNoteCtrl.js”:
app.controller(“myNoteCtrl”, function($scope) {
$scope.message = “”;
$scope.left = function() {return 100 – $scope.message.length;};
$scope.clear = function() {$scope.message = “”;};
$scope.save = function() {alert(“Note Saved”);};
});
<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশন ng-app=”myNoteApp” এর কন্টেইনার হিসেবে কাজ করেঃ
<html ng-app=”myNoteApp”>
একটি <div> এলিমেন্ট এইচটিএমএল পেজে কন্ট্রোলার ng-controller=”myNoteCtrl” এর স্কোপ হিসেবে কাজ করেঃ
<div ng-controller=”myNoteCtrl”>
একটি ng-model ডিরেক্টিভ একটি <textarea> কে কন্ট্রোলার ভ্যারিয়েবল ম্যাসেজে বাইন্ড করেঃ
<textarea ng-model=”message” cols=”40″ rows=”10″></textarea>
ng-click ইভেন্ট দু’টি কন্ট্রোলার ফাংশন clear() এবং clear() কে ইনভোক বা আহবান করেঃ
<button ng-click=”save()”>Save</button>
<button ng-click=”clear()”>Clear</button>
একটি ng-bind ডিরেক্টিভ বাকি থাকা ক্যারেকটারগুলো দেখিয়ে কন্ট্রোলার ফাংশন left() কে <span> তে বাইন্ড করেঃ
Number of characters left: <span ng-bind=”left()”></span>
পেজে অ্যাপনার অ্যাপ্লিকেশন লাইব্রেরিকে যোগ করা হয়েছে (লাইব্রেরির পরে):
<script src=”myNoteApp.js”></script>
<script src=”myNoteCtrl.js”></script>
অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের কাঠামো
উপরে ব্যবহার উপযোগী একটি বাস্তব অ্যাংগুলার-জেএস (single page application অর্থাৎ SPA) এর কাঠামো দেয়া হয়েছে।
<html> এলিমেন্টটি অ্যাংগুলার-জেএস অ্যাপ্লিকেশনের (ng-app=) কন্টেইনার।
<div> এলিমেন্টটি একটি অ্যাংগুলার-জেএস কন্ট্রোলারের (ng-controller=) স্কোপ ঠিক করে দেয়।
একটি অ্যাপ্লিকেশনে অনেকগুলো কন্ট্রোলার ব্যবহার করতে পারবেন।
একটি অ্যাপ্লিকেশন ফাইল (my…App.js) অ্যাপ্লিকেশন মড্যুল কোড নির্ধারণ করে।
এক বা একাধিক কন্ট্রোলার ফাইল (my…Ctrl.js) কন্ট্রোলার কোড নির্ধারণ করে।
পুরো প্রক্রিয়াটির সারাংশ?
অ্যাংগুলার-জেএস লাইব্রেরিটি <head> এ লোড হয়, কারন সঠিকভাবে কম্পাইলড হওয়ার জন্য স্ক্রিপ্টগুলো লাইব্রেরি কোডের উপর নির্ভর করে।
ng-app ডিরেক্টিভটি অ্যাপ্লিশনের রুট এলিমেন্টে রাখা হয়।
সিংগেল পেজ অ্যাপ্লিকেশনের(SPA) জন্য <html> এলিমেন্টটিই অধিকাংশ সময় অ্যাপ্লিকেশন রুট হয়ে থাকে।
এক বা একাধিক ng-controller ডিরেক্টিভ অ্যাপ্লিকেশন কন্ট্রোলার নির্ধারণ করে দেয়। প্রত্যেকটি কন্ট্রোলারের নিজস্ব স্কোপ (যে এইচটিএমএল এলিমেন্টে সেগুলো ডিফাইন করা হয়েছে) রয়েছে।
HTML DOMContentLoaded ইভেন্টে অ্যাংগুলার-জেএস সয়ংক্রিয়ভাবে সচল হয়ে যায়। যদি একটি ng-app ডিরেক্টিভ পাওয়া যায় অ্যাংগুলার-জেএস ঐ ডিরেক্টিভে উল্লেখিত (নেমড) যেকোন মড্যুলকে লোড করবে এবং DOM কে ng-app দিয়ে অ্যাপ্লিকেশনের রুট হিসেবে কম্পাইল করবে।
পুরো পেজটিই অ্যাপ্লিকেশনের রুট হতে পারে; অথবা এর ক্ষুদ্রতর অংশও হতে পারে। পেজের অংশটি যত ক্ষুদ্র হবে অ্যাপ্লিকেশনটি তত দ্রুত কম্পাইল ও অ্যাকজিকিউট করবে।
Feb 03
ফর্ম ব্যবহার করে ডাটাকে আমরা পোস্ট করে থাকি। কিন্তু অনেক সময় ইউজার কোন ফিল্ড কে খালি রেখে অথবা কোন কিছু পুরণ না করে পোস্ট করতে পারে এই ক্ষেত্রে তাকে এই এররটা ইউজার কে দেখিয়ে দেওয়ার জন্য আমরা পিএইচপি তে কিছু কোড ব্যবহার করব। এখন আমরা একটি উদাহরণ দেখব যেখানে এইচটিএমএল ব্যবহার করে একটি ফর্ম ব্যবহার করা হয়েছে তাতে ফিল্ড খালি রেখে পোস্ট করলে পরবর্তীতে তাকে যেই ফিল্ড গুলো সে পূর্ণ করে নি সেখানে এরর মেসেজ দেখাবে। কোড গুলো নিম্মরুপ
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
/*ডাটা পোস্ট করা হবে*/
Name: <input type="text" name="name"> /*একটি নামের ফিল্ড*/
<span class="error">* <?php echo $nameErr;?></span>
/*যদি ফাকা রেখে সাবমিট করা হয় তাহলে পিএইচপি এর মাধ্যমে
এররর মেসেজ দেখাবে এই span id এর ভিতরে*/
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
/*যদি ফাকা রেখে সাবমিট করা হয়
তাহলে পিএইচপি এর মাধ্যমে এররর
মেসেজ দেখাবে এই span id এর ভিতরে*/
<br><br>
<label>Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
/*যদি ফাকা রেখে সাবমিট করা হয় তাহলে পিএইচপি
এর মাধ্যমে এররর মেসেজ দেখাবে এই span id এর ভিতরে*/
<br><br>
<input type="submit" name="submit" value="Submit">
/*সমস্ত ডাটাগুলো লেখার পর পোস্ট বাটন এ ক্লিক করলে
ডাটাগুলো পিএইচপি পরবে তার জন্য আমরা এখন কোড লিখব*/
</form>
< ?php
// ফাকা ডাটা বা variable গুলো চিহ্নিত করার জন্য।
$nameErr = $emailErr = $genderErr = $websiteErr = ""; $name = $email = $gender = $comment = $website = "";
if ($_SERVER["REQUEST_METHOD"] == "POST")
/*যদি পোস্ট নামের বাটন এ ক্লিক করা হয়ে থাকে তাহলে
পরবর্তী ভিতরের অংশ কাজ করবে।*/
{
if (empty($_POST["name"]))
/*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল
কিনা যদি না করে থাকে তাহলে span id এর ভিতরে
এইচটিএমএল পার্ট এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
{
$nameErr = "Name is required";
/*এই টেক্সট টি নাম ফিল্ড ফাকা থাকলে তার পাসে দেখাবে*/
}
else {
$name = test_input($_POST["name"]);
/*অথবা যদি পোস্ট করে থাকে তাহলে এই কোড
এর মাধ্যমে পিএইচপি দতা টা পরবে*/
}
if (empty($_POST["email"]))
/*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা যদি না করে
থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট এর ভিতরে যেখানে
আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
{
$emailErr = "Email is required";
}
else
{
$email = test_input($_POST["email"]);
}
if (empty($_POST["website"]))
/*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা
যদি না করে থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট
এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
{
$website = "";
}
else
{
$website = test_input($_POST["website"]);
}
if (empty($_POST["comment"]))
/*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা
যদি না করে থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট
এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
{
$comment = "";
}
else {
$comment = test_input($_POST["comment"]);
}
if (empty($_POST["gender"]))
/*চেক করবে এই ফিল্ডের এর ডাটা ইউজার ইনপুট করেছিল কিনা
যদি না করে থাকে তাহলে span id এর ভিতরে এইচটিএমএল পার্ট
এর ভিতরে যেখানে আমরা লিখেছিলাম সেইখানে ডিসপ্লে করবে*/
{
$genderErr = "Gender is required";
}
else {
$gender = test_input($_POST["gender"]);
}
}
?>
* required field.
Feb 02
AngularJS References
parijat biswas
student of CSE
university of Asia Pacific
AngularJS Directives
যেসব AngularJS Directives এই টিউটোরিয়ালে ব্যবহৃত হয়ছেঃ
Directive বর্ণনা ব্যাখ্যা
ng-app একটি অ্যাপ্লিকেশন এর মূল উপাদান সংজ্ঞায়িত করার জন্য ব্যবহৃত Directives
ng-bind HTML element এর innerHTML এপ্লিকেশন ডাটাতে যুক্ত করে । Introduction
ng-click একটি উপাদান ক্লিক করা হলে আচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় । HTML Events
ng-controller একটি অ্যাপ্লিকেশনের object control করার জন্য ব্যবহৃত হয় । Controllers
ng-disabled HTML disabled attribute এ এপ্লিকেশন ডাটা যুক্ত করে । HTML DOM
ng-hide html উপাদান hide বা show করে । HTML DOM
ng-include একটি অ্যাপ্লিকেশন মধ্যে html যুক্ত করে । Includes
ng-init একটি অ্যাপ্লিকেশনের জন্য প্রাথমিক মান সংজ্ঞায়িত করার জন্য ব্যবহৃত Directives
ng-model এপ্লিকেশন ডাটাতে html control এর মান যুক্ত করে । Directives
ng-repeat প্রতিটি ডাটার জন্য একটি টেমপ্লেট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয় । Directives
ng-show html উপাদান show অথবা hide করে । HTML DOM
AngularJS Filters
AngularJS Filters
যেসব AngularJS Filters এই টিউটোরিয়ালে ব্যবহৃত হয়ছেঃ
Filter বর্ণনা
Currency একটি নাম্বারকে currency format এ রূপান্তর করে ।
Filter একটি array থেকে subset নির্বাচন করে ।
Lowercase একটি string কে lower case এ রুপান্তর (format) করে ।
orderBy expression এর মাধ্যমে একটি array কে order করে ।
uppercase একটি string কে upper case এ রুপান্তর (format) করে ।