How to: Create a Feedback Form End to End using Angular 4(UI), Spring Boot(Middle Tier) and MongoDB (Database)
This is a three-tier process where the first tier consists of Angular UI, middle tier consists of spring boot and the database is MongoDB.
Using Angular, we create a feedback form which consists of email, subject, and description. When the feedback is submitted by the user, the middle tier will get the data from the UI and then it stores in the database(MongoDB).
First, we will create a Feedback form UI using Angular4.
Install the angular cli in your computer by using the following link — https://angular.io/guide/quickstart
To create a new angular project use the following command in the terminal as
ng new bootstrapangular
Install the Bootstrap which is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. It also gives you support for JavaScript plugins.
Download the feedback form UI code from this link — https://github.com/slamtrade/feedbackUI.git
Run the angular project using the commands in the terminal as
npm install
ng serve — open
The feedback form is displayed in the browser at default host for Angular — localhost:4200.
Secondly, we will configure the middle tier(Spring Boot) to get the feedback from the UI.
Download the spring boot code from the GitHub using the following link-https://github.com/slamtrade/springbootmdbconfig.git
Open the downloaded project folder using IntelliJ
At last install the MongoDB in the physical machine by using the following link,
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/
After installing MongoDB start the MongoDB in the spring boot project. To start the MongoDB, create the folders in computer location named data and db inside the data folder.
sudo mkdir data
sudo mkdir db
sudo chmod -R go+w /data/db
Run the following command to start MongoDB
sudo service mongod stop
sudo mongod
Run the MongodbdemoApplication.java using IntelliJ which will make the middle tier (spring boot) to run in the background.
Fill the feedback form and click the submit button, this will store the feedback in MongoDB through the middle tier (spring boot).
The stored feedback in the database can be viewed using MongoDB Compass by giving the hostname = localhost and port number = 27017. Then click connect which will display the stored feedback table in the database.
published by slamtrade.com
