Lab Assignment 5 (Mean Stack Application) - Ruthvicp/CS5551_team_11-2_labassignments GitHub Wiki
Objective : To create an application using mean stack having 1)Login and register pages 2)Mongo db 3)Home page 4)Node module related to project 5)Good UI
Submitted by
Member 1 : Ruthvic Punyamurtula
Class Id : 30
Member 2 : Navya Ramya Sirisha
Class Id : 26
1. Login and Register Pages
Create a login page for the existing user. When user login details are entered into html page and on click submit, app.get() is used to connect to mongodb using connect. Then the credentials are validated with those present in the collection of mongo db. On successful validation user is directed to home page.
The code snippet for finding the user is given below
GUI of login Page
For a new user, a register page is created. The details of the new user are stored into mongo db collection using the app.post() where connection to Db is made and InsertOne() is used to add the details.
Code snippet for adding the user is given below
GUI of register page
Once the user is registered, he is redirected to login page. Now login with the previously created user as shown below
2.Database
In order to install mongo db dependency, go to project directory and give the below command
npm install mongodb --save
We are using mongo db to store, retrieve the user data. user credentials are stored in the mlab doc as shown below
Also using the same database, we will demostrate update/delete and other CRUD operations on user data.
3.Home Page
In the home page, we will display the user list and perform update and delete operations using REST services. (For this we have referred to tutorial on CRUD operation using angular js at https://techbrij.com/mongodb-angularjs-nodejs-sailsjs-crud-bower)
Updating the user - last name
Once the details are updated, user is indicated with an alert message as shown below
Also verify the updated information in mlab doc
Code snippet for update is given below
Now let us perform the delete operation on a user indicated with the tick mark
Verifying the data removed from mlab doc as well
Code snippet for delete is shown below
This completes our crud operations on user details with read/insert/update/delete/
4.Node module
Here the requirement is to use any node modules that is relevant to the project work. So we are using google-charts node modules. Users can also use any of the other node modules for charts available at https://www.npmjs.com/package/
To add this module to your project repository, follow the below image
We have stored the shopping trends data in the mlab document, which we will be using to build the chart for data visualization. The doc is shown below
Home page itself includes the built google chart - here a pie chart as shown below
5. Good UI
We have followed the requirements and built the application using good css styles for the login/register/home pages respectively. Home page shows user data and the shopping trends of the users based on the stored information. CSS file can found in the project repository.