LAB1 - mandaaparna/WEB GitHub Wiki

CSEE5590/490: Web/Mobile Programming (Spring 2019)

LAB ASSGINEMENT 1

Team ID:- 2

Boyapati Ramya Class id-4

Manda Aparna Class id – 14

Yenugu Lohitha Class id - 34

YouTube Link:https://youtu.be/2I0j2J7KG7Q

MOOC Course Registration Application

1.Login Page

Login to the application as existing user or a guest user.Existing user can view the details of courses and enroll into courses whereas Guest user can only view the details of the courses We have defined few user ID’S, you can login into the application using these.

  • Username: AManda Password: 12345@AM
  • Username: LYenugu Password: 12345@LY
  • Username: RBoyapati Password: 12345@RB
  • Languages Used : HTML, CSS, Bootstrapping, Angular JS

2.Home Page

In the home page, we are providing a navigation bar on the left to navigate to various pages across the application. The objective behind the UX of Left Navigation Bar is to enable the user to navigate to any page on the application from any other page.The left navigation bar will be available across all the pages in the application. By clicking on

  • a. ‘My Profile’, the user will be navigated to Profile page where all the details of the user are displayed.
  • Languages Used: HTML, CSS, Bootstrapping, Angular JS
  • b. ‘Enrollments’, the user will be shown a submenu listing Recent Enrollments and All Enrollments. If the user selects Recent Enrollments ,user will be navigated to recent enrollments page where all the recent enrollments of the user will be displayed. If the user selects All Enrollments, user will be navigated to All enrollments page where all the enrollments of the user will be displayed.
  • Languages Used: HTML, CSS, Bootstrapping, Javascript, Jquery
  • c.‘Courses’, the user will be shown a submenu that lists various departments. On selecting the department, the user will be navigated to the respective department page where all the courses of that department are displayed. Registered users can also enroll into the courses where as guest users can only view the courses.
  • Languages Used: HTML, CSS, Bootstrapping, Jquery, Javascript

Workflow of the Application:

This is the login page, where the user can enter their credentials.

If the user tabs out of the user name field without giving a value, it shows a validation that ”username is required”

If the user tabs out of the password field without giving a value, it shows a validation that ”password is required”

If the user gives invalid credentials, on clicking the login button, it shows a validation that “Invalid login Credentilas”.

This is how the Homepage looks like. The user can navigate to various pages on the application using the left navigation bar. The user can logout of the application at anytime using the “logout” button on the header.

On clicking “My Profile” in the navigation bar, the user details are displayed.

On clicking “Enrollments”, the following submenu is displayed.

The following screen will be dispalyed, if the user selects all enrollments. All Enrollment screen displays all the enrollments of the user.

The following screen will be dispalyed, if the user selects recent enrollments. Recent Enrollment screen displays all the recent enrollments of the user.

On clicking “Courses”, the following submenu is displayed.

Upon selecting the department, we will be navigated to the respective department page. In this document, we have provided screenshots for Computer Science department. Upon selecting computer science, the following screen will be displayed (it is similar for other departments too except the information).

The user can select the course career using the course career dropdown and can view the courses for the respective course career.

Below is the screen that lists all the courses for graduate course career.To enroll into a specific course, the user can click on “enroll now” button of that course. For the previously enrolled courses “enroll now” button will not be available.

After clicking the “enroll now” button, the user has been enrolled into that course and a success message “successfully enrolled” will be displayed.

The user can logout of the application anytime using the “logout” button in the header region.

Guest user can only view the details of the courses, but cannot enroll in the courses.