Quartz 5

23. UI Enhancements - Part 1

4 min read

স্বাগতম! আপনার কোর্সের Section 20 (Filters)-এর পর এখন আমরা একটি প্র্যাকটিক্যাল সেশনে চলে এসেছি— “UI Enhancements - Part 1” (লেকচার ৩০৫)।

এই লেকচারে মূলত কোনো নতুন C# বা ASP.NET Core-এর কোর কনসেপ্ট শেখানো হয়নি। বরং, একটি প্রজেক্টের ইউজার ইন্টারফেস (UI) বা ফ্রন্টএন্ডকে CSS এবং HTML স্ট্রাকচার পরিবর্তন করে কীভাবে আরও সুন্দর ও প্রফেশনাল করা যায়, সেটি হাতে-কলমে দেখানো হয়েছে। চলুন দেখে নিই আজকের লেকচারে কী কী পরিবর্তন আনা হলো!

📝 Quick Revision Summary

ভবিষ্যতে দ্রুত রিভিশন দেওয়ার জন্য আজকের লেকচারের মূল কাজগুলো নিচে দেওয়া হলো:

  • CSS Update: wwwroot ফোল্ডারের ভেতরের পুরনো CSS ফাইলটি পরিবর্তন করে লেকচারারের দেওয়া নতুন CSS ফাইল দিয়ে রিপ্লেস করা হয়েছে।
  • Layout View Update (_Layout.cshtml): নেভিগেশন বার এবং টাইটেল বারের ডিজাইন পরিবর্তন করা হয়েছে। Flexbox ব্যবহার করে লেআউটকে রেসপন্সিভ করা হয়েছে।
  • Index View Update (Index.cshtml):
  • Breadcrumbs: ইউজারের বর্তমান অবস্থান (যেমন Contacts > Persons) দেখানোর জন্য Breadcrumbs অ্যাড করা হয়েছে।
  • Buttons: Create, Download PDF/CSV/Excel লিংকগুলোকে বাটনের মতো ডিজাইন দেওয়া হয়েছে।
  • Search Bar: Search Dropdown, Textbox এবং Button-গুলোকে একত্রে একটি সুন্দর বক্সে (Flexbox দিয়ে) ডানপাশে অ্যালাইন করা হয়েছে।
  • Table: ডেটা দেখানোর টেবিলটিকে একটি সাদা ব্যাকগ্রাউন্ডের table-container-এর ভেতরে রাখা হয়েছে এবং কলামগুলোর Width (প্রস্থ) পার্সেন্টেজ দিয়ে নির্দিষ্ট করে দেওয়া হয়েছে।

🔍 Comprehensive Breakdown

১. Setting up the New CSS [Priority: 8/10]

The “Why”: অ্যাপ্লিকেশনটি দেখতে কিছুটা সেকেলে লাগছিল। তাই เลকচারার একটি প্রি-বিল্ট (আগেই তৈরি করা) কাস্টম CSS ফাইল ব্যবহার করেছেন। What was done:

  • GitHub বা সোর্স কোড থেকে নতুন CSS কোড কপি করে wwwroot/css/style.css (বা আপনার নির্দিষ্ট CSS ফাইল)-এ পেস্ট করা হয়েছে।
  • Browser Cache Clear: অনেক সময় নতুন CSS পেস্ট করলেও ব্রাউজারে তা রিফ্লেক্ট করে না। এর জন্য Developer Tools (F12) ওপেন করে Network ট্যাবে গিয়ে “Disable cache” চেকবক্সে টিক দিতে হবে, যাতে ব্রাউজার সবসময় নতুন ফাইল ডাউনলোড করে।

২. Enhancing the Layout (_Layout.cshtml) [Priority: 10/10]

পুরো অ্যাপ্লিকেশনের হেডার বা টাইটেল বার পরিবর্তন করা হয়েছে।

HTML Structure Changes:

  • body ট্যাগের ভেতরে page-content নামের একটি মেইন div নেওয়া হয়েছে, যা পুরো বডির কনটেইনার হিসেবে কাজ করবে।
  • Flexbox: টাইটেল এবং মেনুকে পাশাপাশি দেখানোর জন্য display: flex (বা flex ক্লাস) ব্যবহার করা হয়েছে।
  • Two Sections:
  1. flex-1 দিয়ে বামপাশে অ্যাপ্লিকেশনের টাইটেল (“Contact Manager”) রাখা হয়েছে।
  2. ডানপাশে (padding-right) নেভিগেশন লিংকগুলো (যেমন: Register, Login) রাখা হয়েছে।

৩. Enhancing the Index View (Index.cshtml) [Priority: 10/10]

এই পেজটিতে সবচেয়ে বেশি পরিবর্তন আনা হয়েছে।

৩.১. Breadcrumbs & Top Buttons:

<!-- Flex Container for Top Section -->
<div class="flex">
    <!-- Left Side: Breadcrumbs (flex-1) -->
    <div class="flex-1 text-grey">
        <span>Contacts</span>
        <i class="fa-solid fa-caret-right"></i>
        <span>Persons</span>
    </div>
 
    <!-- Right Side: Action Buttons (flex-1 with right alignment) -->
    <div class="flex-1 text-right">
        <!-- Hyperlinks styled as buttons -->
        <a href="/Persons/Create" class="button-blue-back">Create Person</a>
        <a href="/Persons/DownloadPDF" class="button-blue-back ml">Download PDF</a>
    </div>
</div>

৩.২. The Table Container & Search Bar: পুরো টেবিল এবং সার্চ অপশনকে একটি সাদা ব্যাকগ্রাউন্ডের বক্সে রাখার জন্য table-container নামের একটি div নেওয়া হয়েছে।

<div class="table-container">
    <!-- Grid Header (Title & Search) -->
    <div class="flex">
        <div class="flex-1">
            <h2>Persons List</h2>
        </div>
        
        <!-- Search Section -->
        <div class="flex-3 text-right">
            <label>Search By:</label>
            <select class="search-dropdown" ...></select>
            <input type="text" class="search-text" style="width:200px" .../>
            <button class="search-button ml">Search</button>
            <a href="/Persons/Index" class="ml">Clear</a>
        </div>
    </div>
 
    <!-- Actual Table -->
    <table class="table persons w-100 mt">
        <thead>
            <tr>
                <th style="width: 10%">Person Name</th>
                <!-- ... other columns ... -->
            </tr>
        </thead>
        <tbody>
            <!-- foreach loop for rows -->
        </tbody>
    </table>
</div> <!-- Don't forget to close the container! -->

৪. Common UI Mistakes & Fixes (Debugging) [Priority: 9/10]

লেকচারার কোড লেখার সময় কিছু ছোটখাটো ভুল করেছিলেন এবং সেগুলো লাইভ ফিক্স করেছেন। এগুলো রিয়েল-ওয়ার্ল্ড ডেভেলপমেন্টে প্রায়ই হয়:

  • Missing Span Tags: Breadcrumb-এর আইটেমগুলো পাশাপাশি না এসে নিচে নিচে আসছিল। কারণ টেক্সটগুলোকে <span> ট্যাগের ভেতর রাখা হয়নি। (Span হলো inline element)।
  • Typo in FontAwesome: fa-solid লেখার জায়গায় ভুল করে fa-sold লেখা হয়েছিল, যার কারণে আইকন শো করছিল না।
  • Container Mismatch: table-container div-টি টেবিলের আগেই ক্লোজ হয়ে গিয়েছিল, যার কারণে টেবিলের ব্যাকগ্রাউন্ড সাদা হচ্ছিল না। পরে ক্লোজিং ট্যাগটি টেবিলের শেষে সরানো হয়।

🚀 Best Practices

যেহেতু এটি একটি ফ্রন্টএন্ড বা UI-ফোকাসড লেকচার, তাই এখানে ASP.NET Core-এর চেয়ে HTML/CSS-এর বেস্ট প্র্যাকটিস বেশি প্রযোজ্য:

  1. Use Flexbox: আগের দিনের float: left/right পরিহার করে সবসময় CSS Flexbox বা Grid ব্যবহার করুন। লেকচারার এখানে খুব সুন্দরভাবে flex-1, flex-3 ক্লাস দিয়ে লেআউট ভাগ করেছেন।
  2. Inline Styles পরিহার করুন: লেকচারার যদিও style="width:200px" এর মতো Inline CSS ব্যবহার করেছেন, তবে প্রফেশনাল প্রজেক্টে এগুলো আলাদা CSS ফাইলে (Class হিসেবে) রাখাই বেস্ট প্র্যাকটিস।

পরবর্তী লেকচারে (Part 2) আমরা Create এবং Edit পেজের UI-তেও এরকম চমৎকার কিছু পরিবর্তন দেখব। আপনি তৈরি হলে জানাবেন!

Graph View

Backlinks