Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Link to download the project source code here.

Let’s see what this project is all about. This project is a basic gym project which has 2 modules in it.

  1. Admin end
  2. User end

Admin end

Let’s start with the Admin end first. In this part, the admin has all the rights of the application's master, such as adding Users, Role, Scheme, Plan, and various reports, such as month-wise and year-wise income reports, all member reports, and also, it has a renewal report which shows how many renewals are there for the period the admin chooses.

User end

If you look at the User end, a user is a person who does the work of registering new members and collecting payments. The user has limited access, such as a user can register a new member and renew membership and see payment details of the member along with renewal date.

The project has 3 parts.

  1. Angular CLI which is on top of node.js
  2. NET Core for APIs
  3. SQL Server for database parts

Platform Used

Angular Version 7 is used.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Microsoft Visual Studio Community 2017

The link to download Microsoft Visual Studio Community 2017 is here.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Microsoft SQL Server 2012

Link to download SQL Server Express is here.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Visual Studio Code

Link to download Visual Studio code is here.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

JWT Token for Authentication of APIs

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Image is referenced from here.

External packages which are used in .NET Core Project

  1. JWT Token for Authentication of APIS
  2. Dapper ORM
  3. AutoMapper
  4. Linq.Dynamic.Core

External packages which are used in Angular Project

  1. @angular/material
  2. @ngx-bootstrap/datepicker

Let’s start with database tables first.

Database

For this application, I have used SQL Server database. You can download the entire script of this database and use it.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Let us explore the tables of this database one by one so that you will have a clear idea of which table is used for which purpose.

Fiscal year

This table contains the financial year details.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Member Details

Whenever a new member takes a subscription, all member details are stored in this database.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Payment Details

Whenever a new member takes a subscription, all payment details are stored in this database.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

PeriodTB

This table contains periods, such as 3 months, 6 months, and 1 year.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

SchemeMaster

This table contains Schemes.

Example: - GYM+CARDIO1, GYM

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Plan Master

This table contains plans along with the plan amount and Service Tax. For one scheme, there can be multiple plans.

Example: - plan names are Quarterly, Half Yearly, Yearly, Men Special Plan, Women Special Plan.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Role

This table contains Roles.

Example: - Admin, User.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

UsersInRoles

This table contains UserID and roleID means a role assigned to the user is stored in this table.

Example: - Admin, User.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Users

This table contains the user login credentials.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

After understanding the table structure, let’s move forward to understand the API application structure.

API Project Structure

In this part, we are going to have a look at the API project in detail. API Project Name is WebGYM which is developed in ASP.NET CORE Framework version 2.1.

The project structure is a simple and clean repository pattern with ASP.NET Core built-in dependency injection framework.

Let’s start from Model class library. This class library contains all Models which are used in the application and which are similar to database entities. In the same way, you can see ViewModels; these models are used for taking requests and displaying the response of APIs. Further, we are having a view into Interface Class library which contains all the interfaces of the application used for loose coupling of applications. These interfaces are implemented in the concrete class library. This layer directly interacts with your database. In this project, I have used Entity Framework Core and Dapper ORM to access the database.

Added ASP.NET MVC Core Web Project.

WebGYM

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Next, we are going to have a look at WebGYM.Models Class Library.

WebGYM.Models

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Next, we are going to have a look at WebGYM.ViewModels Class Library.

WebGYM.ViewModels

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

After having a look at View Models Class library, next, let’s have a look into Interface Class library.

This Class Library contains all Interfaces in which we have declared methods. This interface is going to implement a concrete class (WebGYM.Concrete).

WebGYM.Interface

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

WebGYM.Concrete

The WebGYM.Concrete Class Library contains all the classes which are using Entity Framework Core ORM for accessing the database including the DatabaseContext class, the main class for interacting with the database. I have also used Dapper ORMrm for some database operations.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

After viewing the class library, next, we are going to view the API Controller Structure.

Controllers

The Controllers folder contains all API controllers created in this application.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

DbContext (we are using Entity Framework core in this project)

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Appsettings.json file

In the appsettings.json file, we store all application settings in a key-value pair. Here, we have stored the connection string of database.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Setting Dependence injection in Startup.cs class

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Filters and Encryption library

For the authentication of APIs, I have Used JSON Web Tokens and for error logging, I have created “CustomExceptionFilterAttribute” which is registered as a filter in ConfigureServices Method in start-up Class.

You can see the error log folder which contains text files where generated errors in the application are stored. For the encryption of password, I have used Advanced Encryption Standard (AES) Algorithm.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

The above shows how the directory and folder structures look. Now, let's check out the application screens.

After having a view of completed API application screens, next, we are going to view Angular Application Project Structure.

Angular Application Project Structure

Below is a complete view of Angular Application project structure. If you see the below snapshot you will see all folders with proper naming which tells which folder contains which Component in it.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Next let’s view some folders to know how we are maintaining Services, Models, Component and Html Views.

Let’s Expand RoleMaster Folder. If you see in that folder we have 2 folders; one is Models folder and another is Service Folder.

Model Folder contains Class which is used with Views and API to Post, Get Request and Response.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Let’s have look at the completed flow of role module and you will get a good idea of how the application is designed.

app.RoleModel.ts

This is a model which is used on role HTML template for model binding.

  1. export class RoleModel
  2. {
  3. public RoleName: string;
  4. public Status: boolean;
  5. public RoleId : number;
  6. }

app.Role.component.ts

Role Component, which is going to render role template.

  1. import { Component } from '@angular/core';
  2. import { RoleModel } from './Models/app.RoleModel';
  3. import { RoleService } from './Services/app.role.Service';
  4. import { Router } from '@angular/router';
  6. @Component({
  7. templateUrl : './app.Role.html',
  8. styleUrls: ['../Content/vendor/bootstrap/css/bootstrap.min.css',
  9. '../Content/vendor/metisMenu/metisMenu.min.css',
  10. '../Content/dist/css/sb-admin-2.css',
  11. '../Content/vendor/font-awesome/css/font-awesome.min.css'
  12. ]
  13. })
  15. export class RoleComponent
  16. {
  17. private _roleService;
  18. RoleModel : RoleModel = new RoleModel();
  19. output: any;
  21. constructor(private _Route: Router, roleService :RoleService ){
  22. this._roleService = roleService;
  23. }
  25. onSubmit()
  26. {
  27. this._roleService.AddRole(this.RoleModel).subscribe(
  28. response => {
  29. this.output = response
  30. if (this.output.StatusCode == "409") {
  31. alert('Role Already Exists');
  32. }
  33. else if (this.output.StatusCode == "200") {
  34. alert('Role Saved Successfully');
  35. this._Route.navigate(['/Role/All']);
  36. }
  37. else {
  38. alert('Something Went Wrong');
  39. }
  40. });
  41. }
  43. }

Moving forward you can see the Services folder; in this folder we are consuming Web API Services.

Role.Service

In this class, we use HttpClient to call API services and along with that we also send JWT token which is used for authentication. If you see Role.Service class you will find all kind of Http Method get, post, put, delete.

  1. import { Injectable } from '@angular/core';
  2. import { Observable, throwError } from 'rxjs'
  3. import { catchError, tap } from 'rxjs/operators'
  4. import { HttpClient, HttpErrorResponse, HttpHeaders, HttpResponse } from '@angular/common/http';
  5. import { RoleModel } from '../Models/app.RoleModel';
  6. import { environment } from 'src/app/Shared/environment';
  7. @Injectable({
  8. providedIn: 'root'
  9. })
  11. export class RoleService {
  13. private data: any;
  14. private apiUrl = environment.apiEndpoint + "/api/CreateRole/";
  15. token: any;
  16. username: any;
  18. constructor(private http: HttpClient) {
  19. this.data = JSON.parse(localStorage.getItem('AdminUser'));
  20. this.token = this.data.token;
  21. }
  23. public AddRole(rolemodel: RoleModel) {
  24. let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  25. headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
  26. return this.http.post<any>(this.apiUrl, rolemodel, { headers: headers })
  27. .pipe(
  28. catchError(this.handleError)
  29. );
  30. }
  32. // Get All Role
  33. public GetAllRole() {
  34. let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  35. headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
  36. return this.http.get<RoleModel[]>(this.apiUrl, { headers: headers }).pipe(tap(data => data),
  37. catchError(this.handleError)
  38. );
  39. }
  41. // Get All Role By ID
  42. public GetRoleById(RoleId) {
  43. var editUrl = this.apiUrl + '/' + RoleId;
  44. let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  45. headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
  46. return this.http.get<RoleModel>(editUrl, { headers: headers }).pipe(tap(data => data),
  47. catchError(this.handleError)
  48. );
  49. }
  51. // Update Role
  52. public UpdateRole(rolemodel: RoleModel) {
  53. var putUrl = this.apiUrl + '/' + rolemodel.RoleId;
  54. let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  55. headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
  56. return this.http.put<any>(putUrl, rolemodel, { headers: headers })
  57. .pipe(
  58. catchError(this.handleError)
  59. );
  60. }
  62. public DeleteRole(RoleId) {
  63. var deleteUrl = this.apiUrl + '/' + RoleId;
  64. let headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  65. headers = headers.append('Authorization', 'Bearer ' + `${this.token}`);
  66. return this.http.delete<any>(deleteUrl, { headers: headers })
  67. .pipe(
  68. catchError(this.handleError)
  69. );
  70. }
  72. private handleError(error: HttpErrorResponse) {
  73. if (error.error instanceof ErrorEvent) {
  74. // A client-side or network error occurred. Handle it accordingly.
  75. console.error('An error occurred:', error.error.message);
  76. } else {
  77. // The backend returned an unsuccessful response code.
  78. // The response body may contain clues as to what went wrong,
  79. console.error(`Backend returned code ${error.status}, ` + `body was: ${error.error}`);
  80. }
  81. // return an observable with a user-facing error message
  82. return throwError('Something bad happened; please try again later.');
  83. };
  84. }

After we have viewed Services folder, next let’s view Html Templates of Role Module.

app.Role.html template

app.Role.html Template which is been used as templateUrl in app.Role.component.ts class.

  1. <h4>Add Role</h4>
  2. <hr>
  3. <div class="panel panel-default">
  4. <div class="panel-heading">Add Role</div>
  5. <div class="panel-body">
  6. <form #f="ngForm" novalidate (ngSubmit)="onSubmit()">
  7. <div class="row">
  8. <div class="col-md-4">
  9. <label for="name">RoleName</label>
  10. <input type="text" class="form-control" name="RoleName" [(ngModel)]="RoleModel.RoleName" maxlength="50"
  11. #refRoleName="ngModel" id="RoleName" required>
  12. <div *ngIf="!refRoleName.valid && (refRoleName.dirty || refRoleName.touched)" class="alert alert-danger">
  13. <div [hidden]="!refRoleName.errors.required">
  14. RoleName is required
  15. </div>
  16. </div>
  17. </div>
  18. <div class="col-md-4">
  19. <label for="name">Status</label>
  20. <input type="checkbox" name="Status" [(ngModel)]="RoleModel.Status" maxlength="50" #refStatus="ngModel"
  21. id="Status" required>
  22. <div *ngIf="!refStatus.valid && (refStatus.dirty || refStatus.touched)" class="alert alert-danger">
  23. <div [hidden]="!refStatus.errors.required">
  24. Status is required
  25. </div>
  26. </div>
  27. </div>
  28. <div class="col-md-4">
  29. <button type="submit" style="margin-top: 10px" [disabled]="!f.form.valid" class="btn btn-success">Submit</button>
  30. <a style="margin-left: 10px; margin-top:7px;" class="btn btn-info" [routerLink]="['/Role/All']">
  31. All Roles </a>
  32. </div>
  34. </div>
  35. </form>
  37. </div>
  38. </div>

package.json

Package json contains all packages which are used in this project.

  1. {
  2. "name": "gym-project",
  3. "version": "0.0.0",
  4. "scripts": {
  5. "ng": "ng",
  6. "start": "ng serve",
  7. "build": "ng build",
  8. "test": "ng test",
  9. "lint": "ng lint",
  10. "e2e": "ng e2e"
  11. },
  12. "private": true,
  13. "dependencies": {
  14. "@angular/animations": "^7.0.4",
  15. "@angular/cdk": "^7.1.1",
  16. "@angular/common": "~7.0.0",
  17. "@angular/compiler": "~7.0.0",
  18. "@angular/core": "~7.0.0",
  19. "@angular/forms": "~7.0.0",
  20. "@angular/http": "~7.0.0",
  21. "@angular/material": "^7.1.1",
  22. "@angular/platform-browser": "~7.0.0",
  23. "@angular/platform-browser-dynamic": "~7.0.0",
  24. "@angular/router": "~7.0.0",
  25. "core-js": "^2.5.4",
  26. "hammerjs": "^2.0.8",
  27. "html2canvas": "^1.0.0-alpha.12",
  28. "jspdf": "^1.5.2",
  29. "ngx-bootstrap": "^3.1.2",
  30. "rxjs": "~6.3.3",
  31. "xlsx": "^0.14.1",
  32. "zone.js": "~0.8.26"
  33. },
  34. "devDependencies": {
  35. "@angular-devkit/build-angular": "~0.10.0",
  36. "@angular/cli": "~7.0.6",
  37. "@angular/compiler-cli": "~7.0.0",
  38. "@angular/language-service": "~7.0.0",
  39. "@types/node": "~8.9.4",
  40. "@types/jasmine": "~2.8.8",
  41. "@types/jasminewd2": "~2.0.3",
  42. "codelyzer": "~4.5.0",
  43. "jasmine-core": "~2.99.1",
  44. "jasmine-spec-reporter": "~4.2.1",
  45. "karma": "~3.0.0",
  46. "karma-chrome-launcher": "~2.2.0",
  47. "karma-coverage-istanbul-reporter": "~2.0.1",
  48. "karma-jasmine": "~1.1.2",
  49. "karma-jasmine-html-reporter": "^0.2.2",
  50. "protractor": "~5.4.0",
  51. "ts-node": "~7.0.0",
  52. "tslint": "~5.11.0",
  53. "typescript": "~3.1.6"
  54. }
  55. }

After we have completed single module next, we are going to have a look on all admin screens of applications.

Admin Application Screens

Login is common for Admin and User.

We are going to log into the application with admin credentials.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

After logging into the application the first screen which appears is your dashboard.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

After logging into the application, we are first going to view Add Scheme.

Add Scheme

In this part, we are going to Add a New Scheme.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Scheme

Displays all schemes which are added.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Edit Scheme

In this part, we can just edit the status of the scheme. If you want to change the name then you can delete and add a new scheme.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Add Plan

In this part, we are going to add the plan and while adding we are going to select Period and Scheme. Also enter Plan amount and required service tax for it.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Plan

Displays all Plans which are added.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Edit Plan

In this part, we can Edit Plan which we have added.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Add Role

In this part, we are going to add new roles

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Role

Displays all roles which are added.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Edit Role

In this part, we are going to edit and update role status.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Create New User

In this part, we are going to add new user/admin who is going to use this application.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Users

Displays all Users which are added.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Edit Users

In this part, we can Edit User Details which we have added such as User Email or Phone and Password.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Assign / Remove Role

In this part, we are going to assign and remove roles to the user which we have created.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Assigned Roles

In this part, we are going to assign and remove roles to the user which we have created.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Member Report

In this part, admin can export all member data for reporting.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Exported all Member Report in Excel

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Year wise Collection Report

In this part, the admin will select the year and click on the submit button to generate a report and also can export it.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Exported Year Wise Collection Report in Excel

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Month-wise Collection Report

In this part, the admin will select Month and click on the submit button to generate and export report.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Exported Month Wise Collection Report in Excel

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Renewal Report

In this part the admin just needs to choose dates and submit to get all renewal Member details.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Exported Renewal Report in Excel

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

User Application Screens

We are going to log in to the application with User credentials.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

User Dashboard

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Add Member

From this view, we are going to register new members and also, we will select a scheme and plan here. According to the plan we choose it will show the amount the member needs to pay.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Member

Display all Members who got a membership.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Edit Member

In the edit part, we can edit some Member details but we cannot change the plan of members. If something is wrong then we need to delete the member again and create a new one.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

All Payment Details

All the payment details are displayed in this View.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Receipt

In this part, we need to provide a receipt to a member who registered for the membership. On-grid, we have Receipt button. Just clicking on it will show you a receipt of the particular member. On the receipt page, we have a Print button to generate the PDF.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

PDF format of the receipt

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Renewal of Membership

In this part, we are going to renew the membership of members. The page is simple; we just need to search the member name which is an autocomplete feature and after choosing a name, it will get all his/her details. Here, we can change the Member Scheme and Plan if he wants and we can choose New Membership Date for renewal.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

After searching the Member, click on Member name and all the details are displayed.

Angular 7 Project With ASP.NET CORE APIS (Gym Project)

Choose a date to renew and click on the Renew button to renew membership.

Wow, finally, we have completely gone through the application. You can download the entire application and database and play with it. Also, try to make this application better by contributing to it on GitHub.