Angular Demo Application With ASP.NET Core MVC (Rent A Car)

Link to Source code.



This project is a simple "rent a car" project developed in ASP.NET Core MVC and Angular with SQL Server 2008 R2 as back-end.

This application has 2 modules.

1. User end
2. Admin end

User Process

Renting a car is common nowadays. We have seen most people want rented cars; they do not want to purchase their own car but still they want a car for tour or visiting their native places. But for renting a car, you need to go to tours and travels consultants and ask them if there are any 6 seater or 5 seater cars available. Then, depending on the terms and conditions, we are able to rent this car.

Meanwhile, in this project, we have tried to automate this process by creating an application where the user needs to register himself on a portal. Then, he can log in with his credentials and book a car. After booking, the next step is to make a payment. If you have booked a car and you have not made a payment, then you have not booked a car at all. Along with this, you can also cancel your booking. In this application, you can easily check your booking history and transaction history.

Features

1. Booking
2. All Booking Details
3. All Pending Booking Details
4. All Payment Details
5. Cancel Booking

Admin Process

In this application the admin can addnew cars, he can also view all bookings which have occurred along with that all payment transactions and also can cancel bookings.

Features

1. Add Car Details and Photo
2. All Pending Booking Details
3. All Payment Details
4. Cancel Booking

Platform Used

This application is developed using Angular, Microsoft Visual Studio Community 2017, and SQL Server 2008 R2 Express Edition.

Note

It’s just “Angular” As you might have already guessed, the term “Angular 2” is also kind of deprecated once we get to version 4, 5 etc. That said, we should start naming it simply “Angular” without the version suffix.

Microsoft Visual Studio Community 2017

Link to download.

Microsoft SQL Server 2008

Link to download.

Node

Link to download.



Original source of image.

Angular

Angular 2.3.1



Original source of image.

Database

1. BankTB
   Table contains list of bank names
   
   
   

2. Booking
   Table contains all booking details 
   
   
   

3. CarTB
   Table contains all car details
   
   
   

4. PaymentTB
   Table contains all Payment details
   
   
   

5. TokenManager
   Table contains all user token details 
   
   
   

6. Usermaster
   Table contains all User details e.g. (Username, Password)
   
   
   

7. UserType
   Table contains all User type details e.g. (Admin, User)
   
   
   

After completing with database part next we are going to have a look at project structure.



External Packages Used in Project

1. Mydatepicker
   It is simple date picker use for selecting date on User Registration form

2. ng2-progressbar
   It is simple progress bar to display in progress while posting or getting data.

3. date time picker
   It is simple date time picker

4. dev express
   It is simple date time picker

It is good to show entire package.json file

{
    "version": "1.0.0",
    "name": "angular2_aspmvc_core1_getting_started",
    "private": true,
    "dependencies": {
        "@angular/common": "^2.3.1",
        "@angular/compiler": "^2.3.1",
        "@angular/core": "^2.3.1",
        "@angular/forms": "^2.3.1",
        "@angular/http": "^2.3.1",
        "@angular/platform-browser": "^2.3.1",
        "@angular/platform-browser-dynamic": "^2.3.1",
        "@angular/router": "^3.3.1",
        "@angular/upgrade": "^2.3.1",
        "body-parser": "1.14.1",
        "bootstrap": "3.3.5",
        "es6-shim": "^0.35.0",
        "fancybox": "3.0.0",
        "jquery": "2.1.4",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.27",
        "zone.js": "^0.6.23",
        "angular2-in-memory-web-api": "0.0.20",
        "mydatepicker": "2.0.3",
        "ng2-progressbar": "1.3.0",
        "ng2-bootstrap": "1.6.3",
        "datetime-picker": "0.6.0",
        "ng2-datetime-picker": "0.15.1",
        "devextreme": "17.1.3",
        "devextreme-angular": "17.1.3",
        "jszip": "^3.1.2"
    },
    "devDependencies": {
        "del": "2.1.0",
        "gulp": "3.9.0",
        "gulp-typescript": "^2.13.4",
        "gulp-watch": "4.3.5",
        "merge": "1.2.0",
        "typescript": "^2.0.2",
        "typings": "^1.3.3",
        "rimraf": "^2.5.4"
    },
    "scripts": {
        "postinstall": "typings install"
    }
}

All installed npm dependencies.



Model Folder contains all Models created in this application.



Controller Folder contains all Web API created in this application.

This folder contains all Web API controllers which are used for various purposes such as registering new User, Validating Login Credentials, Booking a car and much more.



Database first

In this project, we are going to use Database-First approach to access database using Entity Framework.



Everyone is new to .NET Core. So, here comes how to set the Connection string in .NET Core.



Setting dependency injection for getting instance of DatabaseContex at Controllers



Security

For securing the application and maintaining session, we have generated Token.

Filters to Validate

1. Admin Filter
   Token to validate User is Admin and along with that it checks if token is expired or not. 
   
   
   

2. User Filter
   Token to validate User only (not admin user) and along with that it checks if token is expired or not.
   
   
   

Angular

Angular app folder contains entire Angular application in it. And we are using ASP.NET CORE MVC that is why we need to keep all files in a wwwroot folder such that they are accessible to the browser.

Node_modules



Module

This is the main file where the entire application component needs to be declared and entire Routing is defined here.



AuthGuard

In this application, I have created 2 authgaurd.

1. User (auth.guard.ts)
   To check user is logged in or not.

2. Admin (auth.adminguard.ts)
   To check Admin is logged in or not.
   
   
   

The above shows how the directory and folder structure looks, now let’s check out our screens.

Starting with Registration Screen

Registration Screen



After the user is registered then he is redirected to login page.

Login Screen



After login screen now let’s check System User Screen.

User Dashboard

After logging in application the first screen visible to the user is UserDashboard. It has all links to easy access for the user.



Booking



Payment



If you do not want to do payment here then you can leave here and come back after some time to do payment then you need to see all pending booking details page to repay.

All Pending Booking Details

On this page you will see all payment pending bookings records, to make repayment you need click on Make Payment button.

1. Make payment. 
   
   
   

2. Delete Booking.
   
   
   

After making Payment

All Booking Details

You can see all booking details from the User dashboard by clicking on All Booking Details link.



All booking records are displayed according to date.

All Payment Details

You can see all payment details from User dashboard by clicking on All payment Details link.



All payment records are displayed according to date.

Change Password



Admin Section



Admin Dashboard

After logging in to application the first screen visible to the user is Admin Dashboard. It has all links to easy access to the user.



Add Car

Adding new cars



Upload photo

Uploading photo of the car which we have added



Show all Cars

From dashboard click on show all cars to see all cars which are added by admin.

All Car Details

Display all cars.



Edit Car Details

For editing car details



Show All Payments

From dashboard click on show all payments to see all payments done by users.



Show All Bookings



Finally, we have completed the project successfully and I believe that people who are new to Angular have learned a lot from this project.