Post Search

CSS

How to learn সিএসএস লিংক | SP Foundationbd

Html link কে css দিয়ে চমৎকার style করা যায়। যেমন

1.a{

2.color: maroon;

3.text-decoration:none;

  1.  

5.}

 

এখন ধরুন আপনি চান লিংকের রং মেরুন রংয়ের দেখাক কিন্তু যখন একবার ইউজার লিংটিতে click করবে এরপর থেকে লাল দেখাবে যাতে করে ইউজার বুঝতে পারে কোন কোন লিংক সে visit করেছে। এসব করতে css বিশেষ ক্লাস আছে নাম pseudo-class.

কয়েক ধরনের সিডো class আছে যেমন

01.a{

02.color:maroon;

03.text-decoration:none;

04.}

05.a:visited{

06.color:red;

07.}

08.a:hover{

09.color: #000;

10.text-decoration : underline;

11.}

12.a:focus{

13.color: magenta;

14.}

15.a:active{

16.color: yellow;

17.}

 

** সিডো ক্লাস দিয়ে স্ ..... ..... ......

CSS

How to learn সিএসএস লিস্ট | SP Foundationbd

HTML এ দুই ধরনের এলিমেন্ট আছে list তৈরীর জন্য এটা আগে আমরা জেনে এসেছি। <ul></ul> এবং <ol></ol>

Navigation মেনু বা যেকোন তালিকা তৈরীর সময় এই ul, ol এবং li ব্যবহার করে থাকি। এই list styling এর জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমন

list-style-type, list-style-position, list-style-image, list-style, marker-offset

 list-style-type

যখন list তৈরী করা হয় তখন (ul দিয়ে) বাই ডিফল্ট প্রতিটি লিস্টের সামনে একটা করে বুলেট চলে আসে যেমন

1.<ul>

2.<li>HTML</li>

3.<li>CSS</li>

4.<li>PHP</li>

5.<li>MySQL</li>

6.</ul>

৭ নম্বর লাইনের "disc" বাই ডিফল্ট থাকে। অ ..... ..... ......

Jquery & Ajax

jQuery tooltip tutorial | SP Foundationbd

বিভিন্ন সাইটে দেখে থাকবেন কোন text, button, link ইত্যাদির উপর mouse নিয়ে গেলে মাউসের আশেপাশে কিছু অতিরিক্ত বর্ননা দেখায় এটাই টুলটিপ।আমি এখানে একটা ফর্মের জন্য tooltip তৈরী করে দেখাচ্ছি যেখানে প্রতিটি form ফিল্ডের উপর mouse নিয়ে গেলে এই ফিল্ডে কি ধরনের তথ্য দিয়ে পুরন করতে হবে তা দেখাবে।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>SPFoundationbd ToolTip tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css">

06.<script type="text/javascript" src="/jquery_latest.js"></script>

07.<script type="text/javascript" src="/script.js"></script>

08.</head>

09.<body>

10.<h ..... ..... ......

CSS

How to learn সিএসএস বর্ডার | SP Foundation

HTML element এর চারপাশে border দেয়া যায়। border-style, border-width, border-color ইত্যাদি প্রোপার্টি দিয়ে এই বর্ডারের অনেক style করা যায়।

যেমন

01.p.one {

02.border-style: solid;

03.border-width: 3px;

04.border-color: maroon;

  1.  

06.}

  1.  

08.p.two {

09.border-style: solid;

10.border-width: medium;

11.}

12.p.three{

13.border-style: double;

14.}

15.p.four{

16.border-style: groove;

17.}

18.p.five{

19.border-style: dotted;

20.}

21.p.six{

22.border-style: dashed;

23.}

24.p.seven{

25.border-style: inset;

26.}

  1.  

28.p.eight{

29.border-style: outset;

30.}

31.p.nine{

32.border-style: ridge;

33.}

34.p.ten{

35.border-style: hidden;

36.}

** border-width প্রোপার্টি টি একা থাকলে কাজ করবেনা, তার আগে border ..... ..... ......

Jquery & Ajax

jQuery form validation | SP Foundationbd

যেকোন সাইটের Application নিয়ে কাজ করার সময় সাধারনত form লাগে। Registration form, জরিপ form, Login form  ইত্যাদি।যাইহোক এরুপ form থাকলে validation রাখতে হয়।যদি server side (php) validation রাখেন তাহলে এটা ইউজারের জন্য বেশ বিরক্তিকর।যতক্ষন পর্যন্ত ডেটাবেস থেকে কোন মান চেক করতে না হয় ততক্ষন server সাইড validation না রাখাই ভাল। Jquery দিয়েই সব ধরনের validation করা সম্ভব।নিচের একটি উদাহরন ব্যাখ্যাসহ দেয়া হল।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>SP Foundationbd form validation tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css"/>

06.<script src="/jquery_latest.js" type="text/javascript">< ..... ..... ......

CSS

How to learn সিএসএস প্যাডিং | SP Foundation

Padding হচ্ছে html এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের দুরত্ব। যেকোন একটা html এলিমেন্টে css দিয়ে বর্ডার দিন এবার সেখানে padding দিন তাহলে স্পষ্ট দেখতে/বুঝতে পারবেন যে প্যাডিং দিলে কোথায় ফাকা বা স্পেস বাড়ে। যেমন

1.border : 2px solid #fff;

2.padding : 5px; 

padding : 5px; দেয়াতে এলিমেন্টের চারিদিকে ৫ পিক্সেল করে স্পেস হবে। শুধু একদিকে বা কয়েক দিকেও প্যাডিং দেয়া যায়। যেমন

1.padding-top : 5px;

2.padding-bottom: 5px;

3.padding-right: 5px;

4.padding-left: 5px;

এভাবে চারবার লেখার কাজ একবারে করা যায়, এটাকে শর্টহ্যান্ড প্রোপার্টি ..... ..... ......

Codeigniter

Form validation tutorials (CI Form Validation Tutorial) - আরও উন্নত validation

এরর হলে Form submit হয়না এবং ফর্মটি আবার এরর মেসেজ সহ দেখায়, সুতরাং ফর্ম যখন অনেক বড় হবে তখন ইউজারের পূরনকৃত ডেটা যাতে আবার পূনরায় টাইপ করতে না হয় (যখন এরর মেসেজ সহ ফর্ম আবার দেখাবে) সেজন্য set_value() নামের একটি function আছে। ফিল্ডের value তে নিচের মত দিয়ে এরুপ করতে পারেন (বিস্তারিত কোড তো ডাউনলোড করেছেন, ওখানে দেখুন)

1.value="<?php echo isset($users[0]['email']) ? $users[0]['email']: set_value('email');?>"

 কয়েকটি গুরত্বপূর্ন rules এর বর্ননা

is_unique[table_name.column] : বুঝতেই পারছেন is_unique এর ৩য় বন্ধনীর ভিতর টেবিলের নাম এরপর ডট চিহ্ন দিয়ে কলামে ..... ..... ......

Jquery & Ajax

jQuery drop down menu | SP Foundationbd

বিভিন্ন সাইটে আমরা যেসব Dropdown Menu দেখি এসব সাধারনত javascript বা jquery দিয়ে করা। যেহেতু এখানে আমি jquery tutorials লিখছি তাই jquery দিয়ে এরুপ একটি system তৈরী করে দেখাচ্ছি। খুব সহজ।

index.html

01.<!doctype html>

02.03.<head>

04.05.<title> Spfoundationbd!</title>

06.<link rel="stylesheet" href="/style.css" type="text/css"/>

07.<script src="/jquery_latest.js" type="text/javascript"></script>

08.<script src="/script.js" type="text/javascript"></script>

09.</head>

10.<body>

11.<div id="content">

12.<ul id="menu">

13.<li><a href="#">Reference</a>

14.<ul>

15.<li><a href="#">PHP</a></li>

16.<li><a href="#">MySql</a></li>

17.<li><a href="#">CakePHP</a></li>

18.</ul>

19.</li>

20.<li>& ..... ..... ......

CSS

How to learn সিএসএস টেক্সক্ট | SP Foundationbd

Text এ শুধু font দিয়ে সব রকম সৌন্দর্য আনা যায়না। তাই css এ আরো বেশ কিছু প্রোপার্টিজ আছে যেগুলি দিয়ে text কে নানানভাবে সাজানো যায়।

text-align এবং text-transform প্রোপার্টির কি কি মান হতে পারে এগুলি আগেই আলোচনা হয়েছে।

text-indent প্রোপার্টি দিয়ে একটা এলিমেন্টে যে টেক্সট আছে সেটার প্রথম লাইনকে আড়াআড়ি ভাবে সরিয়ে দেয়া যায়। পিক্সেল কিংবা শতকরা মান দিতে পারেন। যেমন

1.text-indent : 200px;

 ** মাইনাস (-) মানও দেয়া যায়। মাইনাস দিলে বাম দিকে সরতে থাকবে।

 ** মুলত এ ..... ..... ......

Codeigniter

Form Validation টিউটোরিয়াল (CI Form Validation Tutorial | Codeigniter Tutorials) | SP Foundation

** এখন পর্যন্ত করা (এটা সহ) টিউটোরিয়ালগুলির সব কোড ডাউনলোড করুন (এডিট মেথডেও ফর্ম ভেলিডেশন সহ)। একটা কথা বলে রাখি তাহল এই টিউটোরিয়ালে ব্যবহৃত অতিরিক্ত কোডগুলিই শুধু বুঝানোর জন্য এখানে উল্লেখ করব কারন পূর্নাঙ্গ কোড দিলে জায়গা কম তাই সমস্যা হয়। তাছাড়া পূর্নাঙ্গ কোড ডাউনলোড করে দেখতে পারেন।

 কোডইগনাইটারে form ভেলিডেশনের জন্য একটি ক্লাস আছে। ১ ডজনেরও বেশি মেথড এবং option আছে। আপনার এপ্লিকেশনে ফর্মে যত ধরনের ফিল্ড আছে সব ধরনের ফিল্ডের validation করা সম্ভব। যেমন সংখ ..... ..... ......