Blog System in Website

Blog System Technical Documentation

Overview

The blog system is designed to enhance website SEO by providing a platform for publishing fresh, keyword-rich content that can attract search engine traffic. Regularly updated blog posts improve search engine rankings by increasing indexed pages, incorporating targeted keywords, and generating backlinks. This consistent flow of relevant content engages visitors, reduces bounce rates, and increases user dwell time, contributing positively to SEO performance.

Key Features

1. Blog Management

• Create,Details,Index and Delete blog posts.
• View blog posts in descending order by ID.
• Password-protected administrative actions.

2. Image Handling

• Supported formats: PNG, JPG, JPEG.
• Max file size: 2MB.
• Images are stored with filenames matching their BlogId.

3. Security

• Password authentication for creating and deleting posts.
• Single password stored in the BlogPassword table.

4. Navigation

• Previous and next post navigation on Blog details page.
• Blog listing with responsive preview cards.

System Architecture

Database Schema

-- BlogPosts Table
CREATE TABLE BlogPosts (
    Id INTEGER PRIMARY KEY AUTOINCREMENT,
    BlogId NVARCHAR(8) NOT NULL,
    BlogDate DATETIME DEFAULT CURRENT_TIMESTAMP,
    Heading NVARCHAR(500) NOT NULL,
    Subheading NVARCHAR(1000),
    Body NVARCHAR(MAX),
    Image NVARCHAR(14), -- 00000001.png
    Footer TEXT
);

-- BlogPassword Table
CREATE TABLE BlogPassword (
    Id INTEGER PRIMARY KEY AUTOINCREMENT,
    Password NVARCHAR(50) NOT NULL
);

Data Models

public class Blog
{
    public int Id { get; set; }
    public string BlogId { get; set; }
    public DateTime? BlogDate { get; set; }
    public string Heading { get; set; }
    public string Subheading { get; set; }
    public string Body { get; set; }
    public string Image { get; set; }
    public string Footer { get; set; }
    public string Password { get; set; }
    public int NextBlogId { get; set; }
    public int PreviousBlogId { get; set; }
}

Core Components

1. Repository Layer

   • IBlogRepository: Defines data access contracts.
   • BlogRepository: Implements CRUD operations using Dapper.

2. Service Layer

   • IBlogService: Defines business logic contracts.
   • BlogService: Implements business logic and HTTP operations.

3. Controllers

   • BlogController: Handles HTTP routes and requests.

4. Frontend Components

   • BlogIndex.razor: Lists blog posts.
   • BlogDetails.razor: Displays detailed blog content.
   • BlogCreate.razor: Form for creating new blog posts.
   • BlogDelete.razor: Handles blog post deletion.
   • BlogComponent.razor: Reusable blog card component.

API Endpoints

GET    /api/blog/blogindex         - Retrieve all blog posts.
GET    /api/blog/blogdetails/{id}  - Retrieve a specific blog post.
POST   /api/blog/blogcreate        - Create a new blog post.
DELETE /api/blog/blogdelete        - Delete a blog post.
GET    /api/blog/getnextblogid     - Retrieve the next available BlogId.
GET    /api/blog/iscorrectpassword - Validate the entered password.

Database Queries

1. Retrieve Blog Listings

SELECT Id, BlogId, BlogDate, Heading, Subheading, Image 
FROM BlogPosts
ORDER BY Id DESC;

2. Retrieve Blog Details with Navigation

SELECT 
    B.Id, BlogId, BlogDate, Heading, Subheading, Body, Image,
    COALESCE((SELECT Id FROM BlogPosts WHERE Id > B.Id ORDER BY Id ASC LIMIT 1), 0) AS NextBlogId,
    COALESCE((SELECT Id FROM BlogPosts WHERE Id < B.Id ORDER BY Id DESC LIMIT 1), 0) AS PreviousBlogId
FROM BlogPosts B
WHERE B.Id = @Id;

Implementation Notes

• Blog ID Generation: 8-digit format with leading zeros, auto-incremented.
• Image Storage: Images are named after the BlogId and stored in wwwroot/blogimages.
• Password Verification: Handled in the service layer for secure administrative access.

Error Handling

• Image Validation: Checks for file format and size limits.
• Password Validation: Ensures correct password before administrative actions.
• Required Fields: Validates mandatory fields during blog creation or updates.

// Needs to be added 
  "ConnectionStrings": {
    "SQLiteConnection": "Data Source=wwwroot\\Homepage.db"
  }