Lab1 - NehaNavgale/Web_MobileProgramming GitHub Wiki

Lab 1 Report

Team Members:

Neha Navgale -25

Sai Kumar - 33

Thoshita Movva - 23

INTRODUCTION:

Web applications can be simple consisting of only static web pages or they can be dynamic and interactive. In this Lab we developed dynamic web application of which front end is developed using Angular 7, data is stored in MongoDB and to connect mongoDB to angular we are using Node.js. We have developed a responsive Student Portal which will provide different features for students to successfully get enrolled and keep track of their academic activities and information.

OBJECTIVE:

The main objective is to build a Multi-page responsive website for Students and provide them features to enroll for courses, keep track of events, check UMKC book store, learn additional idea about technology by viewing video lessons and keep their personal information up to date.

APPROACH:

To develop this application we have created new project using Angular 7 CLI and added different components for different features. We used Html, CSS and Bootstrap to provide responsive Front end and Typescript for the front end logics and validation. We are using MongoDB to store student's information and in order to perform CRUD operations on Mongo we are using Node.js.

WORKFLOW:

In student portal application, student will have to register using sign up page. If the student is already having account they can login using Sign in page. Once logged in, student will be redirected to Dashboard page, where they can see courses added and any events added. User is provided with a side bar to navigate between different pages and will have option to add courses, look for books, view lessons, view profile and add events to calendar.

This application has different components:

  1. Register: This is the page using which student will be able to register to student portal application. Student will need to provide basic information (First Name, Last Name, Email Address, Student ID and Password) to register. Once registered student will be navigated to Login page.

  1. Login: Student will need to enter registered email address and password to logged in to the application. Once logged in successfully, student will be redirected to Dashboard page.

  1. Dashboard: This is the page where student can see the classes he added. Along with the class name it will also displays the timing of the class, room and instructor. Student can also track the events that he added. From the top header bar student can check the progress of his class added out of 10.

  1. Side Bar: This will be displayed on all pages and will allow user to navigate between pages. The page will also display student's friends.

  1. View Student Profile: Student can navigate to this page from the 'View student profile' link provided at the top right of page. The page will display student information such as personal info, emergency contact, temporary address and permanent address. Student can edit the information anytime and can save it.

  1. Discover Books: Student can look for books available by clicking on this link from side bar. This will navigate student to UMKC bookstore site.

  1. Courses: This page will allow student to add new courses in any term. Once added the course will be displayed under courses list and the same will be available on dashboard.

  1. Calendar: From this page student can add, view and save any events. The student will also have option to change the view of calendar by month, day or week.

  1. Video Lessons: This page will display the video lessons of technologies that will be taught in classes. Student can play the video or can play it by opening video in full screen. Student can logout from the application by clicking logout button from top right header.

MongoDB Database

We have created different collections as shown in figure to store information related to students.

Evaluation and Discussion:

We have used MEAN stack to develop the web application. We have added all the features which was required as a part of Lab assignment. We made application more dynamic by interacting it with Mongo and developed a user friendly application.

Conclusion:

By developing this application we get a hands on experience on making responsive and dynamic web application using MEAN stack.

Video Link: https://youtu.be/yt0D4fY7BXg

GitHub Link: https://github.com/NehaNavgale/Web_MobileProgramming/tree/master/Lab1