সালাম নিবেন। আশা করি সবাই ভালো আছেন। আল্লাহর রহমতে আমিও ভালো আছি ।
সরাসরি ভূমিকায় চলে যাই। বর্তমান সময়ে বেশিরভাগ ডায়নামিক ওয়েবসাইটগুলোতে পিএইচপি, এইচটিএমএল এবং সিএসএস এক সাথে ব্যবহার হয়ে থাকে। কিন্তু এগুলো কিভাবে কাজ করে বিশেষ করে এদের পার্থক্য কী এটা অনেকের কাছেই ঘোলাটে, এই টিউনে চেষ্টা করব যদি কারো অস্পষ্টতা দূর হয়। চেষ্টা করেছি বড় করে লিখতে এবং সবকিছু সম্পর্কে একটু ধারনা তৈরি করতে, সময় নিয়ে পড়বেন।
ওয়েবে সাধারণত ২ ধরণের ওয়েবসাইট আছে। স্ট্যাটিক এবং ডায়নামিক। স্ট্যাটিক মানে হল, আপনি আজকে ভিজিট করলে যা দেখবেন, কালকে ভিজিট করলেও তাই দেখবেন যদি না কেউ back-end থেকে এডিট/পরিবর্তন না করে। আর ডায়নামিক বা চলনশীল ওয়েবসাইটে back-end থেকে কেউ এডিট/পরিবর্তন না করলেও আপনি ভিন্ন ভিন্ন দিনে ভিন্ন ভিন্ন ডেটা দেখতে পাবেন। যেমন প্রথম আলোর ওয়েবসাইটে গেলে প্রথম আলো লোগোর নিচে একটা লাইন দেখতে পাবেন। আজকে এটা লিখা-
"ঢাকা, রোববার, ২০ সেপ্টেম্বর ২০১৫, ০৫ আশ্বিন ১৪২২, ০৫ জিলহজ ১৪৩৬"
কালকে ভিজিট করুন, তাহলে পাবেন এটা-
"ঢাকা, সোমবার, ২১ সেপ্টেম্বর ২০১৫, ০৬ আশ্বিন ১৪২২, ০৬ জিলহজ ১৪৩৬"
গতকাল লিখা ছিল-
"ঢাকা, শনিবার, ১৯ সেপ্টেম্বর ২০১৫, ০৪ আশ্বিন ১৪২২, ০৪ জিলহজ ১৪৩৬"
এরকম একেকদিন একেকটা পাবেন। এটা কিন্তু প্রতিদিন কারো লিখা দেবার প্রয়োজন নেই। সার্ভারকে বলা আছে ভিজিটর যেদিন আসবে সেদিনকার তারিখ দেখাতে।
স্ট্যাটিক ওয়েবসাইটগুলো তৈরি হয় যেকোনো ধরণের মার্কআপ ল্যাঙ্গুয়েজ দিয়ে, যেমন HTML। মার্কআপ ল্যাঙ্গুএজ হল এমন একটা ল্যাঙ্গুএজ যেটি শুধু নির্ধারণ করে ডেটা কিভাবে দেখানো হবে। উদাহরণ দিলে সহজ হবে, ধরে নিই, নিচের উদ্ধরণ চিহ্নের ভিতরের লাইনদুটি হল ডেটা-
“This month name is September
The sum is 12”
এখন ধরুন এই ডেটা’টির September অংশটি বোল্ড করে দেখাতে এবং sum অংশটুকুকে আন্ডারলাইন করে দেখাতে চাইলাম। এটি HTML দ্বারা নির্ধারন করা যায় নিম্নোক্তভাবে-
<html>
<head>
</head>
<body>
This month name is <b>September</b><br>
The <u>sum </u> is 12
</body>
</html>
যেরকম দেখাবে তখনঃ
This month name is September
The sum is 12
ঠিক একইভাবে আমরা যত বড় বড় পেজ দেখি, প্রায় অধিকাংশ পেজের ডেটাগুলোকে HTML বিভিন্ন আকারে সজ্জিত করে। HTML-এর কাজ এটুকুই।
এখন আসি ডায়নামিক ওয়েবসাইটে। এই ওয়েবসাইটগুলো তৈরি হয় বিভিন্ন সার্ভারসাইড ল্যাঙ্গুয়েজ, যেমন (PHP, ASP.NET ইত্যাদি) এবং মার্কআপ ল্যাঙ্গুয়েজ দিয়ে। সার্ভার সাইড ল্যাঙ্গুয়েজকে অনেকে প্রোগ্রামিং ল্যাঙ্গুয়েজের মতই মনে করেন। যখন আপনি কোনো ওয়েবসাইটের সার্ভারে কোনো পেইজের জন্য রিকুয়েস্ট পাঠাবেন আপনার ব্রাউজার থেকে, সার্ভার সফটওয়ার সেটি সার্ভারে ইন্সটলকৃত সার্ভারসাইড ল্যাঙ্গুয়েজ দিয়ে এক্সেকিউট করবে। তারপর আপনার ব্রাউজারে আউটপুট পাঠাবে প্লেইন টেক্সট/HTML ফরম্যাটে। আপনি আপনার ব্রাউজারের এড্রেসবারে গিয়ে লিখলেন http://site.com/page.php। যখন সেটিতে ভিজিট করার জন্য এন্টারে হিট করলেন ঠিক তখনই http://site.com-এর সার্ভারের page.php ফাইলের জন্য আপনার ব্রাউজার http://site.com-এর সার্ভারের কাছে রিকুয়েস্ট পাঠাবে। আমরা মাঝেমধ্যে HTTP REQUEST নামে কিছু শুনে থাকি, এটিই সেই HTTP REQUEST। সার্ভারে সংরক্ষিত page.php ফাইলটি তখন আপনার রিকুয়েস্টকে এক্সেকিউট করা শুরু করবে। page.php-এর ভিতরে যে কোডগুলো দেওয়া থাকবে সেই কোডগুলোর নির্দেশনা অনুযায়ী page.php ফাইল আউটপুট হিসেবে plain text/htm ফরম্যাটে আপনার ব্রাউজারে ডেটা পাঠাবে (Header পরিবর্তন করে আরো ফরমেটে পাঠানো যায়, সে বিষয়ে আমরা না যাই আপাতত)। নাম দেখেই বুঝতে পারছেন, page.php একটি PHP ফাইল। ধরে নেয়া যাক সার্ভারে সংরক্ষিত page.php ফাইলটিতে নিচের কোডটুকু দেওয়া আছে-
<?php
echo ‘This month name is ’;
echo date(‘F’);
$var = 5 + 7 ;
echo ‘<br>The sum is ’. $var;
?>
যারা পিএইচপি জানেননা, তাদের জন্য সংক্ষেপে (আপাতত বিস্তারিত না বুঝলেও চলবে)-
<?php – মানে পিএইচপি কোডের শুরু নির্দেশ করে।
echo – এটি একটি language construct যা কোনো কিছুকে প্রিন্ট করে/দেখায়/আউটপুট দেয়।
‘This month name is’ – পূর্বের ‘echo’ এর পর এটুকু থাকায় এই লেখাটুকু প্রিন্ট হবে।
date(‘F’) – একটি ফাঙ্কশন, যা প্যারামিটার F-এর কারণে সার্ভারের বর্তমান মাসের নাম রিটার্ন করে
$var – একটি ভেরিয়েবল যার মান ৫ এবং ৭ এর যোগফল
echo ‘<br>The sum is ’. $var; – <br> HTML ট্যাগ, The sum is এবং $var ভেরিয়েবলের মান (৫+৭ বা ১২) প্রিন্ট করবে।
?> – পিএইচপি কোড শেষ
উপরোক্ত কোডের আউটপুট হল-
This month name is September
The sum is 12
অর্থাৎ আপনি http://site.com/page.php লিঙ্কে গেলে উপরের আউটপুটটি দেখতে পাবেন। উল্লেখ্য যে, আউটপুটে ২টি লাইন আছে। কারণ এখানে <br> এইচটিএমএল ট্যাগ প্রিন্ট করা হয়েছে যা লাইন ব্রেক করে নতুন লাইন তৈরি করে।
আপনারা দেখতে পাচ্ছেন ডাইনামিক সাইটে PHP ও HTML দুইটি কিভাবে একসাথে কাজ করে। সংক্ষেপে আবার বলি-
১। আপনার ব্রাউজার সার্ভারে রিকুয়েস্ট পাঠায়
২। সার্ভার রিকুয়েস্ট এক্সেকিউট করে
৩। নির্দিষ্ট/উপযুক্ত আউটপুট আপনার ব্রাউজারে ফেরত পাঠায়
আমি এখন পর্যন্ত যে যে বিষয়ে বললাম সবগুলোই বেসিক পর্যায়ের। তাই যারা একেবারেই কিছু জানেননা, তাদের জন্য মোটামোটি জটিল লাগতে পারে। আর যারা কিছুটা জানেন, তাদের কাছে হালকা পাতলা জটিল লাগতে পারে। পিএইচপি এবং HTML কিভাবে আলাদা তা সম্পর্কে বলি-
পিএইচপি কোডগুলো রান হয় সার্ভারে, সেগুলো আপনি দেখতে পারেন না (টেকটিউনস পিএইচপি দিয়ে তৈরি, টেকটিউনসের কোথাও কোনোভাবে কি ঐরকম হিজিবিজি পিএইচপি কোড দেখেছেন?)। এটি বিভিন্ন ধরণের কাজ সম্পাদন করতে পারে। যেমন ১৫ আর ৩ যোগ করলে ১৮ হয়, এটা বের করতে পারে। ডেটাবেজ থেকে ডেটা উদ্ধার, ধংস করে দেয়া, নতুন ডেটা যোগ করা এসব করতে পারে, ফাঙ্কশনভিত্তিক কাজ করতে পারে, শর্তভিত্তিক কাজ করতে পারে (আপনি যখন নতুন টিউমেন্ট করেন, পিএইচপি আপনার টিউমেন্টকে টেকটিউনসের সার্ভারের ডেটাবেজে যোগ করে। আমার টিউনটিও ডেটাবেজে সেভ করা আছে এবং পিএইচপি সেটি পুনরুদ্ধার করে আপনার ব্রাউজারে পাঠিয়েছে, তাই এখন পড়তে পারছেন)। এরকম আরো অনেকভাবে কাজ করতে পারে। অপরপক্ষে HTML রান করানোর প্রয়োজন হয়না, আপনার ব্রাউজারে এইচটিএমএল-এর কাজ সম্পন্ন হয়। এটি আপনার কাছে উন্মুক্ত (আপনি যদি এখন উইন্ডোজচালিত পিসিতে এই টিউনটি পড়ে থাকেন তাহলে Ctrl এবং U এই ২টি বাটন একসাথে চেপে ধরুন, দেখুন HTML কোড দেখতে পান কিনা)। এটি যোগের কাজ করতে পারেনা। এতে কোনো প্রকার ফাঙ্কশন নেই। এটি শর্ত মোতাবেক কাজ করতে পারেনা। এছাড়া আরো অনেক প্রকার পার্থক্য আছে। গুগলে PHP vs HTML লিখে সার্চ দিলে এ বিষয়ে অসংখ্য আর্টিকেল পাবেন।
আশা করি পিএইচপি এবং এইচটিএমএল-এর পার্থক্য কিছুটা হলেও বুঝতে পেরেছেন। এবার আসা যাক সিএসএস-এ।
সিএসএস হল এক প্রকার স্টাইলশীট ল্যাঙ্গুয়েজ। নামই বলে দেয় এর কাজ স্টাইল বা ডিজাইন করা। এটি ডিজাইন করে বিভিন্ন মার্কআপ ল্যাঙ্গুয়েজ (যেমন HTML)। ব্যাপারটা সাধারন। আমাদের আগের ডেটাটি ছিল-
“This month name is September
The sum is 12”
এখন যদি আমি ‘September’ -কে লাল রঙের দেখাতে চাই তাহলে এই সিএসএস-এর সাহয্যে সেটি করতে পারব। যদি ‘sum’ কে বড় করে দেখাতে চাই সেটি সম্ভব এই সিএসএস দিয়ে। কিভাবে হয় বিস্তারিত দেখাব না এখন, সংক্ষেপে বলি-
২টা ফাইল নিলাম, একটা এইচটিএমএল এবং অপরটা সিএসএস (নাম যথাক্রমে index.html এবং style.css এবং ধরে নিলাম দুটি ফাইল একই ডিরেকটরি বা ফোল্ডারে আছে)। এইচটিএমএল ফাইলটি এইচটিএমএল ট্যাগ এবং আমাদের ডেটাকে বহন করবে এবং স্টাইলশিট বা সিএসএস ফাইল এইচটিএমএল ফাইলের ডিজাইন বহন করবে। এইচটিএমএল ফাইলে সিএসএস ফাইল <link> ট্যাগের মাধ্যমে সংযুক্ত করে দেওয়া হবে যাতে এইচটিএমএল ফাইলটি বুঝতে পারে তাকে কেমন স্টাইল/ডিজাইন করা হবে।
style.css ফাইল-
.name {
color:red;
}
.bigWord{
font-size: 25px;
}
index.html ফাইল-
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
This month name is <span class=”name”>September</span>
The <span class=”bigWord”>sum</span> is 12
</body>
আউটপুটঃ
This month name is September
The sum is 12
সিএসএসকে এইচটিএমএল-এর সাথে দেখালাম। এখন পিএইচপি, এইচটিএমএল, সিএসএস এই ৩টাকে এক সাথে দেখানো যাক-
<?php
echo ‘<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>’;
echo ‘This month name is <span class=”name”> ’;
echo date(‘F’);
$var = 5 + 7 ;
echo ‘</span><br>The <span class=”bigWord”>sum</span> is ’. $var;
echo ‘</body>
</html>’;
?>
আউটপুটঃ
This month name is September
The sum is 12
যদি সবকিছু মোটামোটিভাবে বুঝে থাকেন, তাহলে লক্ষ্য করুনঃ
১। পিএইচপি ডিজাইন করার কিছু নেই, কারণ এটি কেউ দেখবেনা। আমার প্রয়োজনীয় কোডটুকু লিখব শুধু (কোডিং সৌন্দর্য বৃদ্ধির জন্য এটির প্যাটার্ণও ডিজাইন করা যায়, তবে সেটি ভিন্ন ব্যাপার)
২। এইচটিএমএল ডিজাইন করার প্রয়োজন আছে। আমি লাল রঙ দেব নাকি নীল রঙ দিব সেটা সবাই দেখবে। ডিজাইনের কাজটা সিএসএস দিয়ে করব।
৩। পিএইচপিএর সাথে সিএসএস ব্যবহার করলেও সেটি পিএইচপিকে ডিজাইন করেনা, এইচটিএমএলকে করে।
৪। এই তিনটি ল্যাঙ্গুয়েজের সবগুলোই দরকারী। কিন্তু পিএইচপি সবচেয়ে পাওয়ারফুল।
যদি উপরে উল্লিখিত বিষয়গুলো বুঝতে পারেন, তাহলে বলা যায় আমার লিখা স্বার্থক। না বুঝলে আবার পড়ুন, গুগল সার্চ করুন কিংবা টিউমেন্টে জিজ্ঞাসা করুন।
এবার খাঁটি বাংলায় কিছু বলা যাক-
ধরুন ৫ তলা ভবন একটি ডায়নামিক ওয়েবসাইট। তাহলে এর অভ্যন্তরেরে রডগুলো হল পিএইচপি, রডের উপরে ইট-বালু-সিমেন্টের আস্তরন হল এইচটিএমএল এবং তার উপরে যদি রং/টাইলস লাগানো হয় তাহলে সেটি হবে সিএসএস। এখানে রড হল অত্যাবশ্যকীয়, এটি ছাড়া ভবন দাড় করানো যাবেনা, ইট-বালু-সিমেন্টও অত্যাবশ্যকীয়, কিন্তু রং/টাইলস হল অপশনাল। মানে একটি ডায়নামিক ওয়েবসাইটে পিএইচপি এইচটিএমএল অবশ্যই থাকবে, তবে সিএসএস নাও থাকতে পারে।
সবশেষে কিছু কথা- চেষ্টা করেছি জটিলতা পরিহার করতে, কিন্তু বোঝার প্রয়োজনে জটিল হয়ে যেতে পারে। উদাহরণগুলো চেষ্টা করেছি সবচেয়ে সহজভাবে বর্ণনা করার জন্য। আমি কলেজে পড়ি, আমাদের আইসিটি পাঠ্যবই-এ কিছু কিছু লিখা থাকলেও উপরের প্রায় সবটুকুই আমার ব্যক্তিগতভাবে শেখা। সেখানে ভুল থাকা অস্বাভাবিক কিছু নয়। চেষ্টা করেছি নির্ভুলভাবে লিখতে, যেসব বিষয় ঝাপসা ছিল আমি নিজেই সেগুলো ক্লিয়ার করে তারপর এখানে লিখলাম। কারণ আমি চাই না আমার থেকে কেউ ভুল জানুক। পাশাপাশি সবার কাছে অনুরোধ, কাউকে ভুল জানাবেননা। আগে সঠিক জানুন, তারপর অপরকে জানান। কারণ আপনার ভুল তথ্য অন্যকে বিভ্রান্তিতে, এমনকি বিপদেও ফেলতে পারে। সর্বশেষ যে কথাটি বলবো, আসুন আমরা কপি পেস্ট করা বর্জন করি এবং অপরকেও কপি পেস্ট টিউন করতে নিরুৎসাহিত করি। (সর্বশেষ কথাটি সানিম মাহবীর ফাহাদ ভাই-এর টিউন থেকে কপি করা :-D)
পড়ার জন্য সকলকে ধন্যবাদ।
সহায়ক লিঙ্কঃ http://www.garshol.priv.no/download/text/http-tut.html
ফেসবুক গ্রুপঃ BD Programmers Communication Help And Solution
আমি এসএমকে ইশতিয়াক। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 10 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 8 টি টিউন ও 145 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
![গল্পে গল্পে CSS শিখুন [পর্ব-০৫] :: CSS ট্রান্সফর্ম – গল্পের আকারে টিউটোরিয়াল!](https://dnc.techtunes.io/tDrive/tuner/2023/08/techtunes_eba7ee82a4fb00f7eada2d720f8325a9-368x207.jpg "গল্পে গল্পে CSS শিখুন [পর্ব-০৫] :: CSS ট্রান্সফর্ম – গল্পের আকারে টিউটোরিয়াল!")
ধন্যবাদ ভাইয়া সুন্দর টিউনের জন্য। আশাকরি নিয়মিত লিখবেন।