🚀 Blog Post Create: The Ultimate Step-by-Step Guide

Add/Create Blog Post ফিচারটি তৈরি করার সময় মূল চ্যালেঞ্জ হলো নতুন ডাটা সেভ করার পাশাপাশি Many-to-Many Relationship (ক্যাটাগরিগুলো) সঠিকভাবে ডাটাবেসে ইনসার্ট করা।

নিচে আপনার প্রজেক্টের আলোকে Create Blog Post-এর একটি কমপ্লিট “Master Guide” দেওয়া হলো।

---

১. ব্যাকএন্ড (ASP.NET Core / EF Core) লজিক

ক্রিয়েট করার সময় আমাদের কাজ হলো ফ্রন্টএন্ড থেকে আসা Guid আইডির লিস্ট ব্যবহার করে জাংশন টেবিল (BlogPostCategory) সহ মেইন অবজেক্টটি সেভ করা।

C#

public async Task<BlogPost> CreateAsync(BlogPost blogPost)
{
    // ১. মেইন BlogPost অবজেক্টটি ডাটাবেস ট্র্যাকিংয়ে অ্যাড করা
    await dbContext.BlogPosts.AddAsync(blogPost);
    
    // ২. সেভ চেঞ্জেস কল করা (এটি জাংশন টেবিলসহ সব ডাটা ইনসার্ট করবে)
    await dbContext.SaveChangesAsync();
    
    return blogPost;
}

নোট: আপনার BlogPost মডেলের ভেতরে যদি public ICollection<Category> Categories { get; set; } থাকে, তবে EF Core অটোমেটিক ডাটা ইনসার্ট করে দেবে।

---

২. ফ্রন্টএন্ড (Angular) – ফর্ম ও ডাটা হ্যান্ডেলিং

নতুন পোস্ট ক্রিয়েট করার সময় আমাদের একটি ফাঁকা ফর্ম লাগবে এবং ইউজার যে ক্যাটাগরিগুলো সিলেক্ট করবে সেগুলো একটি অ্যারেতে জমা করতে হবে।

মূল টুলস: ReactiveFormsModule, signal(), push(), এবং filter()।

TypeScript

// ১. সিলেক্ট করা আইডিগুলো রাখার জন্য অ্যারে
selectedCategoryIds: string[] = [];
isSubmitting = signal(false);

// ২. রিঅ্যাক্টিভ ফর্ম সেটআপ
addBlogPostForm = new FormGroup({
  title: new FormControl('', Validators.required),
  content: new FormControl('', Validators.required),
  urlHandle: new FormControl('', Validators.required),
  featuredImgUrl: new FormControl('', Validators.required),
  author: new FormControl('', Validators.required),
  publishedDate: new FormControl('', Validators.required),
  isVisible: new FormControl(true)
});

// ৩. সাবমিট মেথড
onSubmit() {
  if (this.addBlogPostForm.valid) {
    this.isSubmitting.set(true);
    
    const request = {
      ...this.addBlogPostForm.value,
      // আমাদের সিলেক্ট করা ক্যাটাগরিগুলো রিকোয়েস্টে যোগ করা
      categories: this.selectedCategoryIds 
    };

    this.blogPostService.createBlogPost(request).subscribe({
      next: (response) => {
        this.router.navigate(['/admin/blogposts']);
      },
      error: (err) => this.isSubmitting.set(false)
    });
  }
}

---

৩. এইচটিএমএল (HTML) – মাল্টি-সিলেক্ট ক্যাটাগরি

ইউজারকে সব ক্যাটাগরি দেখাবো এবং সে যেগুলো টিক দেবে সেগুলো আমাদের লিস্টে যোগ হবে।

HTML

<label class="form-label fw-bold">Select Categories</label>
<div class="d-flex flex-wrap gap-2">
  @for (category of categoryList(); track category.id) {
    <div class="form-check">
      <input class="form-check-input" 
             type="checkbox" 
             [id]="category.id" 
             [value]="category.id" 
             (change)="onCategoryChange($event)">
      <label class="form-check-label" [for]="category.id">
        {{ category.name }}
      </label>
    </div>
  }
</div>

---

৪. রিলেশনশিপ হ্যান্ডেলিং (onCategoryChange)

ইউজার যখন টিক দেয় তখন push আর টিক তুলে দিলে filter ব্যবহার করে আইডি ম্যানেজ করা হয়।

TypeScript

onCategoryChange(event: Event) {
  const element = event.target as HTMLInputElement;
  const categoryId = element.value;

  if (element.checked) {
    // ১. লিস্টে নতুন আইডি যোগ করা
    this.selectedCategoryIds.push(categoryId);
  } else {
    // ২. লিস্ট থেকে আইডি সরিয়ে ফেলা (ছাঁকুনি)
    this.selectedCategoryIds = this.selectedCategoryIds.filter(id => id !== categoryId);
  }
}

---

৫. সামারি চেক-লিস্ট (রিভিশন নোট)

ফিচার	ব্যবহৃত মেথড/টুলস	কেন ব্যবহার করলাম?
Form Management	FormGroup	সব ইনপুট ডাটা একসাথে ভ্যালিডেশনসহ হ্যান্ডেল করতে।
Data Collection	.push()	ইউজার যখন কোনো ক্যাটাগরি সিলেক্ট করে তা লিস্টে জমা করতে।
Data Removal	.filter()	ইউজার ভুল করে সিলেক্ট করলে বা আন-চেক করলে তা লিস্ট থেকে সরাতে।
UI Interaction	(change)	চেকবক্সে ক্লিক করার সাথে সাথে লজিক ট্রিগার করতে।
Loading State	signal(false)	বাটন লোডিং এবং ডাবল সাবমিশন বন্ধ করতে।

---

💡 এক্সপার্ট টিপস (revise করার জন্য):

• Create করার সময় ফর্ম থাকে Empty, তাই এখানে patchValue বা effect এর প্রয়োজন হয় না (যদি না আপনি কোনো ডিফল্ট ভ্যালু চান)।
• Relationship হ্যান্ডেল করার সময় সবসময় মনে রাখবেন— ফ্রন্টএন্ড থেকে শুধু ID-এর একটি লিস্ট পাঠালেই ব্যাকএন্ডে রিলেশন তৈরি করা সম্ভব।
• সাবমিট করার আগে this.addBlogPostForm.valid চেক করা মাস্ট, যাতে ভুল ডাটা সার্ভারে না যায়।