ডাইনামিক ওয়েবসাইট ডিজাইনঃ পর্ব ১

14
1637

ডাইনামিক ওয়েবসাইট ডিজাইন করার আগ্রহ অনেকের ই আছে। কিন্তু সঠিক  তথ্য আর দিকনির্দেশনার অভাবে হয়তো অনেকেরই তা হয়ে উঠে না। আজকে আমি এখানে কিভাবে নিজের জন্য ডাইনামিক ওয়েবসাইট ডিজাইন করা যায় তা আলোচনা করতে চেষ্টা করব। আমি আশা করি সবাই লোকাল হোস্ট কি এবং কিভাবে সেট আপ দিতে হয় তা জানেন। আমি Vertrigo সার্ভার ব্যবহার করব, আপনারা চাইলে XAMMP অথবা WAMP ব্যবহার করতে পারেন। তাহলে প্রাথমিক কিছু আলোচনা সেরে নি।

প্রথমে আপনাকে যে বিষয়টা চিন্তা করতে হবে তা হল আপনি কোন বিষয়ের উপর আপনার ওয়েবসাইট বানাবেন। এই জিনিসটা অনেক গুরুত্তপূর্ন কেননা আপনি যদি নাই জানেন কি বানাতে হবে তাহলে আপনি সামনে এগুতে পারবেন না। আপনার ওয়েবসাইট এ কি থাকবে, আপনার ওয়েবসাইট এর মেনুতে কি থাকবে, Header এ কি থাকবে, কি কি কনটেন্ট থাকবে। এই জিনিশগুলা কিন্তু আপনাকে আগে থেকেই ঠিক করে রাখতে হবে। কখনো কি মনে হয় না ইশ এই রকম একটা সাইট যদি আমার থাকত? আমারতো সবসময় মনে হয় একটি সুন্দর সাইত দেখলে অই সাইট এর মত করে একটি সাইট বানাতে। আর তাই আমি সুন্দর কোন সাইট দেখলে প্রথমে তার সোর্স কোড দেখে নি এবং অই সাইট এর ডিজাইন সম্মন্ধে ধারনা নিতে চেষ্টা করি। আপনি CTRL U চেপে এ কাজটা সেরে নিতে পারেন।

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি ওয়েবসাইট এর বেসিক অংশ গুলো কি কি?

সাধারণত একটি ওয়েবসাইটকে আমরা নিম্নোক্ত ভাগে ভাগ করতে পারি।

  1. Header with banner
  2. Sidebar( Left or Right)
  3. Main Content
  4. Footer

একটি ইমেজ এর মাধ্যমে আমি এটি বুঝানোর চেষ্টা করব

ডাইনামিক ওয়েবসাইট ডিজাইনঃ পর্ব ১

1. Header : এই অংশে সাধারণত একটি ওয়েবসাইট এর ব্যানার এবং কিছু লিং থাকে। লিং যুক্ত এই অংশটিকে বলা হয় menu bar। মেনুবার এ আমরা আমাদের ওয়েবসাইট এর প্রধান জিনিস গুলা উল্ল্যেখ করে থাকি।

2. Sidebar : সাইডবার এ সাম্প্রতিক পোস্ট, মেনুবার অথবা কতগুলো লিং থাকে।

3. Main Content : এই অংশে আপনার ওয়েবসাইট এর পোস্ট গুলো বা কনটেন্ট থাকবে।

4. Footer: এই অংশে কে ডেভেলপ করল, কন্টাক্ট ইত্তাদি থাকে।

এতক্ষন আমরা একটি ওয়েবসাইট এ কি কি জিনিস থাকে তা দেখলাম। এখন আমরা মূল কাজে আসি। এই কাজটি করার জন্য আমরা মূলত একটি টেম্পলেট ব্যবহার করব। তাহলে আসুন আমরা একটি টেম্পলেটকে পিএইচপি উপযোগী করে তুলি। এই কাজটি করার জন্য আমাদেরকে নেট থেকে একটি টেম্পলেট নামাতে হবে। এই লিং এ যান download টেম্পলেটটি ডাউনলোড করুন( আপনি চাইলে এই টেম্পলেট টি ডাউনলোড করতে পারেন অথবা আপনার সুবিধা মত যেকোন টেম্পলেট নামিয়ে ট্রাই করতে পারেন )।

এরপর ফাইলটি থেকে এইচটিএমএল কোডটি ড্রিমওয়েভার অথবা যে কোন টেক্সট এডিটর দিয়ে ওপেন করুন। ওপেন করার পর এইচটিএমএল কোডটি দেখুন এবং কোনটা হেডার, কোনটা কনটেন্ট , কোনটা ফুটার তা কোড দেখে আলাদা করতে চেষ্টা করুন। এখন আপনারা htdoc এ গিয়ে test নামে একটি ফোল্ডার খুলুন। এই ফোল্ডার এ আপনার ওয়েবসাইট এর সকল ডকুমেন্ট থাকবে। এই ফোল্ডার এ index.php, header.php, content.php, sidebar.php এবং footer.php এই পাঁচটি ফাইল খুলুন এবং images নামে আরও একটি ফাইল খুলে এতে নামানো image গুলো রাখুন। এখন টেক্সট এডিটর অথবা ড্রিমওয়েভার দিয়ে খোলা এইচটিএমএল কোড এ যান। এই কোড এর প্রথম থেকে দেখতে থাকুন এবং <!– end #header –> অংশ পর্যন্ত কাট করে header.php ফাইল এ paste করুন। তারপর <!– end #content –> পর্যন্ত কাট করে content.php ফাইল এ paste করুন। এরপর <!– end #sidebar –> পর্যন্ত কাট করে sidebar.php ফাইল এ paste করুন। এরপর বাকি অংশ footer.php ফাইল এ paste করে সবগুলো ফাইল সেভ করুন। ও একটি কথা ডাউনলোড করা CSS ফাইল টি টেস্ট ফোল্ডার এ রাখতে ভুলবেন না। তানাহলে পেজ লেআউট ঠিক থাকবেনা।

এখন প্রশ্ন হল এভাবে আমরা একটি টেম্পলেট এর পুরো কোড কে আলাদা করি কেন? আসলে আপনি যখন একটি সাইটের যেকোন পোস্ট অথবা পেজ এ যান তখন কিন্তু সব পেজ এর Header, Footer, Sidebar একই রকম থাকে। তাই প্রত্তেক পেজ এ কোড না লিখে ফাইল গুলাকে শুধু কল করা হয় প্রত্তেক পেজ এ। আর এই কাজটি করা হয় পিএইচপি include function দিয়ে।

এখন index.php ফাইল এ আমরা উক্ত চারটি ফাইল include function দ্বারা অ্যাড করব। নিচে আমি কিভাবে অ্যাড করেছি তা দেখালাম। আপনারাও এভাবে অ্যাড করবেন।

<?php
include(“header.php”);
include(“content.php”);
include(“sidebar.php”);
include(“footer.php”);

?>

অ্যাড করার কাজ শেষ এখন কোড run করার পালা। প্রথমে আপনার server টি run করুন। এখন আপনার browser এ লিখুন http://localhost/test/index.php এবং দেখুন আপনার ডিজাইন করা ডাইনামিক ওয়েবসাইট। আপনি আপনার প্রয়োজনে টেম্পলেটটির সিএসএস এবং এইচটিএমএল ফাইল পরিবর্তন করে নিজের মনের মত কাস্টমাইজ করে নিতে পারেন। আজকে তাহলে এ পর্জন্ত থাক। আগামি পর্বে আমরা পিএইচপি দিয়ে কিভাবে লগিন এবং লগাউট করা যায় তা দেখব। তার আগে আপনাদেরকে পিএইচপি নিয়ে একটু ঘাটাঘাটি করার জন্য বলা হল বেশি ভাল হয় w3school এর পিএইচপির সব টিউটোরিয়াল গুলা শেষ করে ফেলা। এই টিউটোরিয়াল টি লিখতে গিয়ে আমি অনেকগুলো ইংরেজী শব্দ ব্যবহার করেছি। আসা করি এটা আপনারা ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

14 মন্তব্য

  1. স্বাগতম ! শেষ পর্ব পর্যন্ত সাথে থাকব । চালিয়ে যান । আপনাকে ধন্যবাদ !

  2. php include(“….”); শিখানোর জন্য আর থেকে ভালো tune আর হয়না
    অনেক অনেক ধন্যবাদ সুন্দর tune টির জন্য
    ২য় পর্বের জন্য অপেক্ষায় থাকলাম

  3. অসাধারণ এবং মার্জিত টিউন :) টিউনার পেজে স্বাগতম আপনাকে :D আপনার টিউন এর জন্য অপেক্ষায় রইলাম :)

  4. টিউনটি সত্যিই খুব সুন্দর হয়েছে। আশা করি নিয়মিত চালিয়ে যাবেন। কিছু স্ক্রীনশট সহ দিলে আমাদের জন্য ভাল হয়। তাছাড়া কিভাবে একজাম কিভাবে ইন্সটল করব দেখালে আরও ভাল হয়।

  5. vai গিফট পাইলে আমাক অক্ত ভাগ দিয়েন… হা হা হা অনেএক ভালো পোস্ট

  6. টিউনার পেজ এ আপনাকে স্বাগতম । ভাল করে টিউন করে আপনি ও গিফট পেতে পারেন………।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

one + 10 =