Link to Source code.

ASP.NET Core

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.

ASP.NET Core

Microsoft SQL Server 2008

Link to download.

ASP.NET Core

Node

Link to download.

ASP.NET Core

Original source of image.

Angular

Angular 2.3.1

ASP.NET Core

Original source of image.

Database

  1. BankTB
    Table contains list of bank names

    ASP.NET Core
  1. Booking
    Table contains all booking details

    ASP.NET Core
  1. CarTB
    Table contains all car details

    ASP.NET Core
  1. PaymentTB
    Table contains all Payment details

    ASP.NET Core
  1. TokenManager
    Table contains all user token details

    ASP.NET Core
  1. Usermaster
    Table contains all User details e.g. (Username, Password)

    ASP.NET Core
  1. UserType
    Table contains all User type details e.g. (Admin, User)

    ASP.NET Core

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

ASP.NET Core

External Packages Used in Project

  1. Mydatepicker
    It is simple date picker use for selecting date on User Registration form
  1. ng2-progressbar
    It is simple progress bar to display in progress while posting or getting data.
  1. date time picker
    It is simple date time picker
  1. dev express
    It is simple date time picker

It is good to show entire package.json file

  1. {
  2. "version": "1.0.0",
  3. "name": "angular2_aspmvc_core1_getting_started",
  4. "private": true,
  5. "dependencies": {
  6. "@angular/common": "^2.3.1",
  7. "@angular/compiler": "^2.3.1",
  8. "@angular/core": "^2.3.1",
  9. "@angular/forms": "^2.3.1",
  10. "@angular/http": "^2.3.1",
  11. "@angular/platform-browser": "^2.3.1",
  12. "@angular/platform-browser-dynamic": "^2.3.1",
  13. "@angular/router": "^3.3.1",
  14. "@angular/upgrade": "^2.3.1",
  15. "body-parser": "1.14.1",
  16. "bootstrap": "3.3.5",
  17. "es6-shim": "^0.35.0",
  18. "fancybox": "3.0.0",
  19. "jquery": "2.1.4",
  20. "core-js": "^2.4.1",
  21. "reflect-metadata": "^0.1.3",
  22. "rxjs": "5.0.0-beta.12",
  23. "systemjs": "0.19.27",
  24. "zone.js": "^0.6.23",
  25. "angular2-in-memory-web-api": "0.0.20",
  26. "mydatepicker": "2.0.3",
  27. "ng2-progressbar": "1.3.0",
  28. "ng2-bootstrap": "1.6.3",
  29. "datetime-picker": "0.6.0",
  30. "ng2-datetime-picker": "0.15.1",
  31. "devextreme": "17.1.3",
  32. "devextreme-angular": "17.1.3",
  33. "jszip": "^3.1.2"
  34. },
  35. "devDependencies": {
  36. "del": "2.1.0",
  37. "gulp": "3.9.0",
  38. "gulp-typescript": "^2.13.4",
  39. "gulp-watch": "4.3.5",
  40. "merge": "1.2.0",
  41. "typescript": "^2.0.2",
  42. "typings": "^1.3.3",
  43. "rimraf": "^2.5.4"
  44. },
  45. "scripts": {
  46. "postinstall": "typings install"
  47. }
  48. }

All installed npm dependencies.

ASP.NET Core

Model Folder contains all Models created in this application.

ASP.NET Core

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.

ASP.NET Core

Database first

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

ASP.NET Core

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

ASP.NET Core

Setting dependency injection for getting instance of DatabaseContex at Controllers

ASP.NET Core

Security

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

ASP.NET Core

Filters to Validate

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

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

    ASP.NET Core

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.

ASP.NET Core

Node_modules

ASP.NET Core

Module

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

ASP.NET Core

AuthGuard

In this application, I have created 2 authgaurd.

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

    ASP.NET Core

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

Starting with Registration Screen

Registration Screen

ASP.NET Core

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

Login Screen

ASP.NET Core

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.

ASP.NET Core

Booking

ASP.NET Core

Payment

ASP.NET Core

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.

ASP.NET Core

  1. Make payment.

    ASP.NET Core
  1. Delete Booking.

    ASP.NET Core

After making Payment

ASP.NET Core

All Booking Details

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

ASP.NET Core

All booking records are displayed according to date.

ASP.NET Core

All Payment Details

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

ASP.NET Core

All payment records are displayed according to date.

ASP.NET Core

Change Password

ASP.NET Core

Admin Section

ASP.NET Core

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.

ASP.NET Core

Add Car

Adding new cars

ASP.NET Core

Upload photo

Uploading photo of the car which we have added

ASP.NET Core

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.

ASP.NET Core

Edit Car Details

For editing car details

ASP.NET Core

Show All Payments

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

ASP.NET Core

Show All Bookings

ASP.NET Core

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