Quartz 5

1. Getting Started with UI

5 min read

হ্যালো হাসিব! তুমি “Stocks App with CRUD Operations” সেকশনের “Getting Started with UI” লেকচারটি শেয়ার করেছো। এই লেকচারটি মূলত একটি রিয়েল-ওয়ার্ল্ড ASP.NET Core MVC অ্যাপ্লিকেশনের UI (User Interface) সেটআপ করার ফাউন্ডেশন।

চলো, বরাবরের মতো প্রথমে পুরো লেকচারের একটি কুইক সামারি দেখে নিই, তারপর ইন-ডেপথ ব্রেকডাউনে যাবো।

📌 Quick Summary for Revision

  • Folders Setup: UI-এর জন্য Views, Views/Shared, এবং Controllers ফোল্ডার তৈরি করা।
  • Layout View (_Layout.cshtml): অ্যাপ্লিকেশনের কমন স্ট্রাকচার (যেমন Navbar) তৈরি করার জন্য Shared ফোল্ডারে Layout তৈরি করা।
  • CSS & FontAwesome (CDN): কাস্টম CSS ফাইল এবং আইকন ব্যবহারের জন্য FontAwesome CDN লিংক লেআউটে যুক্ত করা।
  • _ViewStart.cshtml: সমস্ত ভিউ ফাইলের জন্য ডিফল্ট Layout প্যাথ গ্লোবালি সেট করা।
  • _ViewImports.cshtml: ভিউগুলোতে বারবার Namespace লেখার ঝামেলা এড়াতে গ্লোবাল Namespaces ইমপোর্ট করা।
  • Project References: Web Project-এর সাথে ServiceContracts, Services, এবং Entities প্রজেক্টের রেফারেন্স যুক্ত করা।
  • PersonsController & Routing: Controller তৈরি করে Index মেথড লেখা এবং Attribute Routing ব্যবহার করে রুট কনফিগার করা (/ এবং /persons/index)।

🚀 Comprehensive Breakdown & The “Why”

নিচে লেকচারের প্রতিটি টপিকের বিস্তারিত আলোচনা করা হলো:

১. Folder Structure এবং Layout View তৈরি [Priority: 8/10]

The “Why”: একটি প্রজেক্টে অনেকগুলো ওয়েব পেজ (Views) থাকে। সব পেজেই Navbar, Footer বা সাইডবারের মতো কিছু কমন অংশ থাকে। এগুলো যদি প্রতিটা ফোল্ডারে আলাদা করে লিখতে যাই, তাহলে কোড অনেক বড় হয়ে যাবে এবং মেইনটেইন করা কঠিন হবে (Violation of DRY - Don’t Repeat Yourself principle)। তাই Shared ফোল্ডারে একটি কমন _Layout.cshtml ফাইল তৈরি করা হয়।

Implementation:

  • Views/Shared ফোল্ডার তৈরি করে সেখানে _Layout.cshtml ফাইল নেওয়া হয়েছে।
  • এই ফাইলে কমন HTML স্ট্রাকচার থাকে এবং যে জায়গায় অন্যান্য ভিউয়ের কনটেন্ট লোড হবে, সেখানে @RenderBody() কল করা হয়।
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    </head>
<body>
    <div class="container">
        <div class="navbar">
            <a href="/persons/index" class="navbar-brand">CRUD App</a>
        </div>
        
        <div class="page-content">
            @RenderBody() </div>
    </div>
</body>
</html>

২. CSS এবং FontAwesome (CDN) যুক্ত করা [Priority: 7/10]

The “Why”: wwwroot ফোল্ডারে থাকা আমাদের নিজস্ব stylesheet.css ফাইলটি লেআউটে লিংক করা হয়েছে ডিজাইনের জন্য। আর UI-তে সুন্দর আইকন দেখানোর জন্য FontAwesome ব্যবহার করা হয়েছে। এখানে CDN (Content Delivery Network) ব্যবহার করা হয়েছে যাতে ইউজার যখন সাইট ভিজিট করবে, তখন তার ব্রাউজার খুব দ্রুত কাছাকাছি কোনো থার্ড-পার্টি সার্ভার থেকে আইকনগুলো লোড করে নিতে পারে।

Implementation: (Layout-এর <head> ট্যাগে)

<link href="~/stylesheet.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" />

৩. _ViewStart.cshtml সেটআপ [Priority: 9/10]

The “Why”: আমাদের যদি ১০০টা ভিউ থাকে, তাহলে প্রতিটা ভিউ ফাইলের শুরুতে গিয়ে Layout = "_Layout"; লেখাটা বেশ বিরক্তিকর। _ViewStart.cshtml ফাইলটি MVC পাইপলাইনে এমনভাবে কাজ করে যে, যেকোনো ভিউ রেন্ডার হওয়ার আগে এই ফাইলটি এক্সিকিউট হয়। ফলে এখানেই আমরা ডিফল্ট লেআউট সেট করে দিতে পারি।

Implementation: (Views ফোল্ডারের রুটে)

// _ViewStart.cshtml
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

৪. _ViewImports.cshtml এবং Project References [Priority: 9/10]

The “Why”: আমরা যখন ভিউয়ের ভেতরে আমাদের Model বা DTO (Data Transfer Objects) ব্যবহার করবো, তখন ফুল Namespace (যেমন: ServiceContracts.DTO.PersonResponse) লিখতে হবে। এটি এড়াতে _ViewImports.cshtml-এ একবার Namespace ডিক্লেয়ার করে দিলে পুরো প্রজেক্টের সব ভিউ তা এক্সেস করতে পারে। আর যেহেতু Web প্রজেক্ট আলাদা, তাই তার অন্যান্য লেয়ার (ServiceContracts, Services, Entities) এক্সেস করার জন্য Project Reference অ্যাড করতে হয়।

Implementation: (Views ফোল্ডারের রুটে)

// _ViewImports.cshtml
@using ServiceContracts.DTO
@using ServiceContracts.Enums
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

৫. PersonsController এবং Attribute Routing [Priority: 10/10]

The “Why”: ইউজারের রিকোয়েস্ট প্রথম Controller-এ এসে হিট করে। PersonsController তৈরি করে সেখানে Index অ্যাকশন মেথড রাখা হয়েছে যা Index.cshtml ভিউকে রিটার্ন করে। এখানে Attribute Routing ব্যবহার করা হয়েছে যাতে আমরা স্পষ্টভাবে বলে দিতে পারি কোন URL-এ হিট করলে এই মেথড কল হবে।

Implementation:

using Microsoft.AspNetCore.Mvc;
 
namespace CRUDExample.Controllers
{
    public class PersonsController : Controller
    {
        // দুটি রুট ডিফাইন করা হয়েছে: 
        // ১. /persons/index
        // ২. / (অর্থাৎ রুট ডোমেইনে হিট করলেও এটি ডিফল্ট হিসেবে কাজ করবে)
        [Route("persons/index")]
        [Route("/")]
        public IActionResult Index()
        {
            return View(); // এটি Views/Persons/Index.cshtml রিটার্ন করবে
        }
    }
}

🆕 .NET 10 & Modern Approaches

লেকচারটিতে .NET এর ক্লাসিক MVC অ্যাপ্রোচ দেখানো হয়েছে, যা .NET 10-এও হুবহু কাজ করবে। তবে আধুনিক ডেভেলপমেন্টে কিছু স্মার্ট পরিবর্তন এসেছে:

  1. Routing in .NET 10: লেকচারে [Route("/")] ব্যবহার করে ডিফল্ট রুট সেট করা হয়েছে। তবে সাধারণত অ্যাপ্লিকেশনের Program.cs ফাইলে গ্লোবাল কনভেনশনাল রাউটিং সেট করাটাই বেস্ট প্র্যাকটিস, যাতে বারবার Attribute Route লিখতে না হয়।
// Program.cs (Modern .NET)
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Persons}/{action=Index}/{id?}");
  1. Implicit Usings: .NET 10-এ Implicit Usings এনাবল থাকলে অনেক বেসিক Namespace অটোমেটিক পেয়ে যায়। তবে কাস্টম প্রজেক্ট লাইব্রেরি (যেমন ServiceContracts) এর জন্য _ViewImports.cshtml ব্যবহার করাই স্ট্যান্ডার্ড।

⌨️ IDE Shortcuts

ফাইল বা ফোল্ডার তৈরি করার সময় তুমি এই শর্টকাটগুলো ব্যবহার করে স্পিড বাড়াতে পারো:

  • Visual Studio (Windows):

  • Add New Item: Ctrl + Shift + A

  • Add New Folder: Shift + Alt + C (কিছু এক্সটেনশনের সাহায্যে)

  • Quick Actions / Refactoring (namespace import): Ctrl + .

  • Visual Studio Code:

  • New File: Ctrl + N

  • Command Palette (To search anything like project references): Ctrl + Shift + P

  • Trigger Suggestion/Quick Fix: Ctrl + .

💡 Best Practices (MVC UI Setup)

১. Tag Helpers over Hardcoded URLs: লেকচারে লেআউট ফাইলে একটি হার্ডকোডেড URL ব্যবহার করা হয়েছে: <a href="/persons/index">। MVC-তে এর বদলে সব সময় Tag Helpers ব্যবহার করা উচিত। এটি রাউটিং চেঞ্জ হলেও অটোমেটিক সঠিক URL জেনারেট করে।

<a href="/persons/index">CRUD App</a>
 
<a asp-controller="Persons" asp-action="Index">CRUD App</a>

২. Avoid Logic in Views: _ViewStart বা অন্য কোনো ভিউ ফাইলে কোনো ধরনের কমপ্লেক্স C# লজিক বা ডাটাবেস কল করা থেকে বিরত থাকবে। ভিউয়ের কাজ শুধুই ডাটা প্রেজেন্ট করা।

লেকচারের এই কনসেপ্টগুলোতে তোমার বুঝতে কোনো অসুবিধা হয়েছে কি? পরের লেকচারটি শেয়ার করলে আমরা ফাংশনালিটি ইমপ্লিমেন্টেশনের দিকে এগোতে পারি!

Graph View

Backlinks