LAB 3 Team 10

TEAM DETAILS:

1. NAME: Nikhil Shravan Krishna Sanka

   CLASS ID: 45

   TEAM NUMBER: 10-1

2. NAME: Sri Venkat Sumanth Sanakkayala

   CLASS ID: 44

   TEAM NUMBER: 10-1

OBJECTIVE

Create a client-server application having

• MongoDB collections for storing user details/resultsto demonstrate create/read/update/delete operations.
• A Home Page with REST services for CRUD operation in MongoDB.
• A node Module
• A goodUser Interface

APPLICATION DESIGN

In this application we are going to create 3 pages

• Sign In page

This page authenticates with the database and checks if we have provided the correct credentials. It has a sign In button which takes us to the chat page. It also has a sign Up option where the users can create their own account with their own credentials.

Output for the login page.

Code for the login page.

• On clicking on sign in we are loging into the app.
• On clicking Sign up we are getting redirected to the signup page.
• This is the client side calling where we call the server by giving the user details as parameters.

• Sign Up Page

In this the user is going to provide his details i.e. username, password, email address. It has a sign up button upon which it sends the details to the database. The data base stores the details in an JSON format and the user name and password are used for authentication.

Code For Sign Up page

Output For Sign Up page.

• ChatPage

This page has a chat window where we can send messages to users and other users can send messages to us. It is a basic layout where when we type the message and hit send, It displays the message we have sent along with the user name. It also notifies us if any user is typing the message.

Code for chat Page

• We have message and handle where handle is the username and it is stored in the local storage.
• All the users who are connected can view the chat and can type messages that are broadcasted.

Layout of Chat Page.

• The chat page appears after user completes a successful login.

• The name of the user can be checked for successful implementation of the application.

• In the above screenshots we can see that two users nikhil and krishna are logged in and when a user is typing some text, a message appears displaying the name of that particular user who is typing saying user is typing a message and once the user clicks on the send button, the message gets broadcasted and can be viewed by everyone.

• The above two images shows us the messages typed and broadcasted by user1(nikhil)

• The above two images shows us the messages typed and broadcasted by user2(krishna).

MongoDB

• We creating a Mongodb using mlab. • In the mlab we are creating a database with the name lab3 • We are linking the code with url provided after creating the database • We are controlling the login and register activities from this database

Database Created.

*Connecting the database with the application. *All the data is being stored in the form of JSON format. The database has an owner which provides the authentication to the database. The data which is sent from signup page is being stored.

CRUD operations

• Signing In When we provide a username and password in the Sign in page, It is sent to the database with POST method and the credentials are authenticated with the data base. If the authentication is successful we will be logged in and sent to the chat window. • Signing Up By providing the details such as username, password, email id and hitting the sign up button we are sending the details o the server and the server stores this received data as a new user.

CODE:

Node module

• We are using a socket.io Module to implement chatting among the user • Setting up the connection

• Implementation

The above code is used in the chat window where users can chat among themselves and the messages are displayed.

Youtube Video Link- https://www.youtube.com/playlist?list=PLCPM60HySG_v5DidYftkYeFSdDad2r1nc