Bootstrap 5 integration with .NET Core & ASP.NET Core

1. Create a database

For our app to work properly, we need to create a MySQL database (in this example we call it dashboard, but you can change it later).

In this instruction we won't get into details about MySQL databases and how to set them up - you can learn more here:

• MySQL docs
• MariaDB

2. Connection string

To connect with a database, we need to set up the connection string in the appsettings.json file:

        
            
            "ConnectionStrings": { "AppConnection":
            "server=localhost;user=test;password=test;database=dashboard" }
          
        
    

Replace user and password values with either your root user (not recommended!) or credentials created for this database (recommended).

Note: The default port is set to 3306 - if you wish to change that, you need to specify the port's value in your connection string.

Learn more about connection strings here.

3. Apply migration

Now, when everything is set, we can update the database to match our initial migration. We will be using Entity Framework Core tools from now on (learn more here).

In your terminal run:

        
             dotnet-ef database update 
        
    

Once you refresh your database, you should see 4 new tables (roles, users, traffic data and migration history).

Every time you wish to update your database (change/add model), you need to create a new migration:

        
            
            dotnet-ef migrations add migrationName dotnet-ef database update
          
        
    

1. Login / Logout

The application is accessible only to a logged-in user - the application uses cookies to authorize the user and check credentials (admin has additional privileges).

Logout removes cookies and redirects user to a login page.

2. Registration

You can add new users with the registration form. Although it's not possible to register several users with one email address, the email confirmation functionality is not provided.

3. User Profile

Each user can update his user profile (avatar, username, password) using forms on the User Profile page.

4. User Management (admin only)

User with the admin privileges can update information about other users. In our basic app, we can change the user's credentials.

1. Users

Admin:

        
            
            { name: "Admin", email: "admin@mdbootstrap.com", password: "admin", roleId: 1 }
          
        
    

User:

        
            
            { name: "User", email: "user@mdbootstrap.com", password: "user", roleId: 2 }
          
        
    

2. Roles

• Admin (id: 1)
• User (id: 2)

3. Traffic Data

Five randomly generated entries for General Dashboard.

1. ORM & Models

The application uses the Entity Framework Core (MySQL). You can manage DbContext in Data/DataContext.cs

Models available in your app out of the box:

• Users
• Role
• TrafficData

2. Data Transfer Objects

Creating Data Transfer Objects is important for frontend-backend communication, as some field should not be accessible on the client-side (f.e. password).

To map easily data from Model to DTO (and another way around), define required profiles (example: Profiles/UserProfile.cs).

3. Controllers & routes

Controllers:

• HomeController
• AuthController
• UserController
• PerformanceController

Home Controller

Rendering views / redirecting unauthorized users.

Routes:

• /Home/UserManagement
• /Home/Index
• /Home/UserProfile
• /Home/Dashboard

Auth Controller

Authorization management

Routes & actions:

• /auth/login (POST, request body: loginDTO)
• /auth/register (POST, request body: createUserDTO)
• Logout()

Performance Controller

The controller provides data for the Dashboard View.

Routes:

• /performance/traffic (GET)
• /performance/traffic (POST) - adds randomly generated entry to the traffic data table

1. Views

Views for your application:

• Index - Login / Register form
• Dashboard - General Dashboard
• UserManagement - Admin panel
• UserProfile - User info & password management

2. Layouts

There are two layouts included in the project:

• Layout (main layout for authorized users)
• LoginLayout (layout for unlogged user, without navigation)

3. wwwroot folder

• /assets - additional files, for example default avatar
• /mdb - MDB 5 files
• /js - js files for views
• layout.css - custom css for layouts