চলুন সফটওয়্যার বানানোর যাত্রায় নামি - পর্ব ০৪
আমরা এবার ডিজাইনিং এর সবচেয়ে গুরুত্বপূর্ণ
অংশ ইউজার ইন্টারফেজ ডিজাইন করব। এর জন্যে আমরা ব্যবহার করব HTML
5, CSS 3, Bootstrap 5 এবং জাভাস্ক্রিপ্ট এর অবজেক্ট অরিয়েন্টেড এপ্রোচ।
কোড লেখার জন্যে আমরা প্রথমেই ভিজুয়াল স্টুডিও
কোড বা যেকোন এডিটর নামিয়ে নিতে পারি। আমি ব্যবহার করব একটি জনপ্রিয় কোড এডিটর ভিজুয়াল
স্টুডিও কোড।
ভিজুয়াল স্টুডিও কোড ডাউনলোড করতে চাইলে Download Visual Studio Code -
Mac, Linux, Windows লিংক থেকে ডাউনলোড করে নিতে পারেন।
ইনস্টল করার পরে আমরা কয়েকটি প্লাগিন ইনেস্টল
করে নিলে এই এডিটরটি আমাদের সবচেয়ে বড় হাতিয়ারে পরিণত হবে। প্লাগিনগুলো হলোঃ লাইভ সার্ভার,
প্রিটিয়ার, HTML code Snippets
একটি ওয়েব সাইটের কাঠামো তৈরী হয় HTML থেকে।
আপনি যদি HTML না পারেন এবং নতুন করে শিখতে চান তাহলে আপনি HTML Tutorial (w3schools.com) লিংক থেকে HTML
শিখে আসতে পারেন।
আমাদের মকস্কেচ অনুসারে আমাদের ওয়েব সাইটটির
তিনটি অংশে বিভক্ত হবে ভিউপোর্টটি।
উপরের ন্যাভিগেশন বার, মাঝে কনটেন্ট এবং শেষে
ফুটার।
আসেন পুরো কোডটা করার চেষ্টা করি । প্রথমেই
একটা ফোল্ডার তৈরী করি। template নামে। উক্ত ফোল্ডারে একটি html ফাইল তৈরি করি
index.html নামে।
ফাইলটিতে HTML বয়েলার প্লেট তৈরি করে নেই।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Template ফোল্ডারে আরেকটি ফোল্ডার তৈরি করি
Style নামে। Style এর ভেতরে একটি ফাইল তৈরি করি যার নাম দেই style.css এবং আরেকটি ফাইল
তৈরি করি যার নাম দেই bootstrap.min.css
আরেকটি ফোল্ডার তৈরি করি template folder
এর ভেতরে। যার নাম দেই js।
এবার আমরা index.html ফাইলটিতে কাজ শুরু করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../static/css/bootstrap.css">
<link rel="stylesheet" href="../static/css/style.css">
</head>
<body class="d-flex flex-column min-vh-100">
<!---Header Part-->
<header class="bg-primary text-white text-center py-3">
<h1>Header section</h1>
</header>
<!--Container Part-->
<div class="container mt-4 flex-grow-1">
<div class="row">
Content part
</div>
</div>
<!--Footer part-->
<footer class="bg-dark text-white text-center py-3">
<p>© 2024 Toady Todo</p>
</footer>
</body>
</html>
উপরের কোডটা পর্যালোচনা করলে দেখা যাবে আমরা
<body> কিছু ক্লাসের ব্যবহার করেছি
d-flex : View Port কে বিভক্ত করার কাজটা
করেছে ফ্লেক্স করার মাধ্যমে।
flex-column: ফেক্স ডাইরেকশন কলাম অনুসারে
করার কাজ করেছে অর্থ্যাৎ প্রতিটি এলিমেন্ট একটি আরেকটির নিচে বসবে এর মাধ্যমে।
min-vh-100: এটি viewport এর সর্বোচ্চ ব্যবহার
নিশ্চিতে গুরুত্বপূর্ণ ভূমিকা রাখে।
body এর ভেতরে তিনটি অংশ এখন আমরা তৈরি করতে
পারি header, content এবং footer
header এর ভেতরে ব্যবহৃত বুটস্ট্যাপ ক্লাশ
গুলো হলো
এই অংশের ব্যাক গ্রাউন্ড কালার ও টেক্সটের
কালার হেডার টেক্সটি সেন্টারে আনতে এবং উপরে এবং নিচে প্যাডিং যুক্ত করতে কোড গুলো
ব্যবহার করা হয়েছে bg-dark text-white text-center py-3
মেইন কনটেন্টে গুরুত্বপুর্ণ অংশ হলো flex-grow-1
যা বাকী থাকা ভিউপোর্ট বা ফ্লেক্স দখল করে।
ফুটার এ হেডারের মতই কাজ করা হয়েছে।
এখন আসছে ন্যাভিগেশন বার ডিজাইন করার কাজ
যা থাকবে হেডারের ভেতরে।
Header এর ভেতরে
<div class="container">
<div class="row">
<h3 class="col-md-6
text-left">Today ToDo</h3>
<div class="col-md-6">
<form action="" class="d-flex
justify-content-center">
<input class="form-control me-3" type="search" name="" id="" placeholder="Search" aria-label="Search">
<button class="btn btn-light" type="submit">Search</button>
</form>
</div>
</div>
</div>
কোডটি বসিয়ে ফেলি
এখানে একটি কনটেইনারে একটি রো নিয়ে তাকে দুভাবে
বিভক্ত করে এক অংশে একটি ব্রান্ড নেম আরেকপাশে একটি সার্চ বার বসানো হয়েছে যার মাধ্যমে
বিভিন্ন সার্চিং করা হবে।
এবার আসি সেই মেইন কনটেন্টে,
এর ভেতরে থাকবে একটা Add New Task বাটন আরেকটি
লিস্ট যেখানে সব task গুলো দেখাবে।
টাস্কগুলো দেখানোর জন্যে একটি কার্ড ব্যবহার
করা যেতে পারে।
যার জন্যে প্রয়োজনীয় কোডটি হলো
<div class="row">
<div class="py-3
text-right">
<button class="btn btn-primary
float-end">Add task</button>
</div>
<div class="card">
<div class="card-body">
<div class="card-title">Task title</div>
<div class="card-description">Lorem ipsum dolor sit
amet consectetur adipisicing elit. Laboriosam deleniti vitae eligendi atque
veritatis quidem consequuntur quia consequatur tempora officiis? Rerum
asperiores assumenda placeat cupiditate voluptatem nulla ratione fuga voluptas.</div>
<div class="card-text"><small class="text-muted">01/01/2024</small></div>
</div>
<div class="card-footer d-flex
justify-content-end">
<button class="btn btn-warning
me-2">Edit</button>
<button class="btn
btn-danger">Delete</button>
</div>
</div>
</div>
যদিও কার্ডগুলো ডাইনামিক ভাবে ডাটা বসাবে
পপআপ স্ক্রিন হিসেবে একটি ফর্ম
যুক্ত করতে নিচের কোডটি লিখতে হবে
<!-- Bootstrap Modal for Add Task -->
<div class="modal fade" id="addTaskModal" tabindex="-1" aria-labelledby="addTaskModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addTaskModalLabel">Add Task</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!--
Your form content goes here -->
<form>
<div class="mb-3">
<label for="taskTitle" class="form-label">Task Title:</label>
<input type="text" class="form-control" id="taskTitle" name="taskTitle" required>
</div>
<div class="mb-3">
<label for="taskDescription" class="form-label">Task Description:</label>
<textarea class="form-control" id="taskDescription" name="taskDescription" required></textarea>
</div>
<div class="mb-3">
<label for="taskdate" class="form-label">Task Date:</label>
<input type="date" class="form-control" id="taskdate" name="taskdate" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন