JB INSTITUTE OF ENGINEERING AND

TECHNOLOGY

Web Application For College Staff

By:- A.Joshua Jayakar(18671A0503)

N.Harshitha Rao(18671A0543) GUIDE-
S.Srinidhi(18671A0552) Srikanth Kama
K.Hitesh(18671A0560)
B.Tech -4th year
Branch-CSE A
 ABSTRACT
 In this project we have built a web-application for the college staff members
where they can create their own college profiles and handle them in various
ways such as uploading their educational certificates ,entering FDP’s
attendance ,class timetables, mid marks, class works etc . To make the above
web-application enter into the real world we use web-development tools.
 Here we took MERN-Stack which has a popular stack of tools for developing
a full stack application . We tried to find out the faults in the previous faculty
dashboard and we intend to update them and help everyone among the faculty
members to feel the ease of using a modern website.

2
 CONTENTS
• Introduction
• Existing Systems
• Proposed Systems
• Software Requirements
• Hardware Requirements
• Technologies
• What is MERN stack
• ER Representation of User Model
• Design Model
• Acknowledgement
• Conclusion

3
 INTRODUCTION
 Here the user is allowed to register to the web-application where it takes the user’s name and
password . Upon successful registration the user can log into the account that he previously created.
 Upon successful entering of details, it will redirect the webpage to a dashboard where we have
multivalued attributes that have to be filled. Few are related to personal details and the others are
related to educational information .
 There is a bar which shows the completion process of the details and there after the details are taken
into admins consideration and the admin will be providing them the new timetable through the web
application.
 After each class ,they can update the Syllabus accordingly.

4
 EXISTING SYSTEM
 In the existing system there were many disadvantages such as, the UI was
not so friendly.
 The faculty members were not given an option to upload their educational
certificates, workshops attended and the time table have to be circulated
manually through papers (not digitally).

5
 PROPOSED SYSTEM
 In the proposed system we ensured ourselves to eliminate the disadvantages in the
existing system.
 By adding and implementing some features such as ,clean and modern UI , uploading
educational certificates,workshop details and access to their latest time-table in the
dashboard itself.
 And the above process of them is spectated by the Admin.

6
SOFTWARE REQUIREMENTS
• Windows 7(min)

• Internet Connectivity

• Latest Search Engines

• Visual Studio Code

7
HARDWARE REQUIREMENTS
Processor : Pentium –IV (Min)

Speed : 1.1 GHz

RAM : 256MB (min)

Key board : Standard Windows keyboard

Mouse : Two or Three Button Mouse

Monitor : SVGA

8
TECHNOLOGIES

• HTML

• CSS

• MERN STACK

9
HTML
 HTML stands for HyperText Markup Language.
 HTML is used to create web pages and web applications.
 HTML is widely used language on the web.
 We can create a static website by HTML only.
 Technically,HTML is a Markup language rather than a programming

language.

10
 CSS
 CSS stands for Cascading Style Sheets.
 It is a style sheet language which is used to describe the look and
formatting of a document written in markup language.
 It provides an additional feature to HTML. It is generally used with
HTML to change the style of web pages and user interfaces.
 You can add new looks to your old HTML documents.
 You can completely change the look of your website with only a few
changes in CSS code.
11
 STACK
 A “stack” refers to any combination of coding languages, tools and framework
developers used to create software products for their clients.
 A stack contains different layers of components that play a vital role in the
process of software product creation.
 Client-side : front-end (HTML, CSS, JavaScript).

 Server-side : back-end (OS, web server, programming language, web framework,

databases).

12
Choosing the Right Stack for your
Project-
Unfortunately, that isn’t always the right criteria for choosing the best type of “stack”. Many
factors come into play here, like:
 Type and size of the project
 Team expertise and knowledge bases
 Time to market
 Scalability
 Maintainability
 Cost of the overall development

13
What is MERN Stack?

 A stack is the mixture of technologies used to

create Web applications. Any web application will
be made utilizing various technologies
(frameworks, libraries, databases).

 The MERN stack is a JavaScript stack that is

intended to make Application Development
process smoother.
What is a MERN Development Stack?
MERN is an acronym used to describe a specific set of JavaScript based
technologies that are used in the web application development process. It is
designed with an idea to make the development process as smooth as possible.
MERN includes the following open-source components:
 Mongo DB
 Express JS
 React JS/ Redux
 Node JS
15
 1.Mongo DB
 This is a free open-source, cross-platform document-oriented database
program.
 It is classified as a No SQL database program, which means that data is stored
in flexible documents with JSON-based query language.
 This also means that the size of the content ,number of fields in the documents
tends to vary.
 The whole data is structured in a way to be prone to change over time.
 MongoDB is known as a flexible solution that is always easy to scale.

16
 2.Express JS
 This is also a free, open-source software, it can be classified as a web
application framework for Node.js.
 To be more precise, Express JS is made for developing web apps and APIs.
 Instead of manually writing full web server code in Node.js, developers use this
MERN component to simplify the coding process.
 The best feature of this framework is that developers don’t repeat the same code
over and over, as they write Node.js code in the HTTP module .

17
 3.React JS/ Redux
 This is a JavaScript library used for building user interfaces. Originally created by a
software engineer who worked for Facebook, React was later on open-sourced.
 This specific library is often used for creating views rendered in HTML. The views
that you create in React declarative, which means that you don’t have to deploy
additional time on managing the changes and effects they have on the data.
 React uses a full-featured programming language (JavaScript) to construct repetitive
or conditional DOM elements.
 With React, the same code can run on both the server and the browser.

18
4. Node JS
 Originally built for Google Chrome and later on open-sourced, Node JS is a
cross-platform run-time JavaScript environment used for executing
JavaScript code outside of a browser.
 JavaScript was originally used for front-end scripting, but Node JS has
enabled devs to use it to write command line tools and back-end scripts for
the purpose of creating dynamic web page content before the page is sent to
the user's web browser.
 Node JS was designed with an idea of allowing devs to build scalable
network applications.

19
Processed diagram on MERN stack

20
Every single one of these components plays a crucial role
in the web app development process. All of these provide an end-to-
end framework for developers to work in. For instance, Mongo DB is
a database system, Node JS is a back-end runtime environment,
Express JS is a back-end web framework and React is a front-end
framework.
Benefit of MERN Stack
 JavaScript is everywhere. It is used both on the front-end and back-end side.
Because of this, there’s no need for context switching.

  MERN is JavaScript-based, devs only need to master a single coding language,

which makes things a million times easier.

 Used to build dynamic web applications in no time.

22
ER Representation of User Model

23
 Design Flow of the project
Sequential steps to built the current web-application are:

1. We need to create a HTML page .

2. We will then add the styling part to the created page using CSS.
3. Then with help of JavaScript we will make it interactive(dynamic).
4. Now in the back-end, we will build a database (MongoDB).
5. With the help of Node.Js we will connect the Front-end to it.
6. The user registration will create a new database.
7. Upon logging in successfully it maps to their respective database.

24
 Design Flow of the project
Sequential steps to built a the current web-application are:

8. The each newly created database has a lot of sections:

such as personal details section, professional details etc.
9. After successful entering all the data will be saved in the database.
10. Whenever the user logs in, it shows them to fill the fields which has not been filled.
11. And also shows them the latest tasks for the day , week or in a month.
12. The user will be able to download specific data and can update their
certificates,FDP’s and workshop details .

25
 ADMIN SIDE

 Characteristics of Admin Account

 Adding new employee (new Lecturer) details to database and set default password to the employee
and sends the login credentials to employee.
 Updating timetable of every faculty for every semester.
 Adding special events to academic calendar if needed
 If any faculty leaves the college, admin can delete the entire database of that particular
faculty.

26
 OPTIONS IN ADMIN ACCOUNT

 Add Faculty
 Assign Time Table
 Delete Faculty
 Find Faculty
 Add Events

27
 FACULTY SIDE
 Characteristics of Faculty Account
 Faculty Account is the section where a faculty can maintain their professional work and their
Daily Work.
 As soon as the faculty opens their account , their profile is visible with a menu on their left side.
 Here, they will have access to edit or add their professional and personal details.
 On the other hand, they can upload their FDPs, workshops they have attended.
 At first when faculty joins the college , they are provided with default password for login, which
can be changed once logged in.
 They have access to view students marks in the website itself

28
 OPTIONS IN FACULTY ACCOUNT

 Profile
 Academic Calendar
 Time Table
 Settings
 Online Exams
 FDPs and WorkShops

29
CONCLUSION

 By this project we will be able to develop a user-friendly and interactive

dashboard where the faculty can update and view the details which were
restricted to do in the previous website.
 Ultimately making faculty’s work easier.

30
Acknowledgement
We have taken efforts in this project. However, it would not have been possible without the kind
support and help of many staff members of JBIET. We would like to extend our sincere thanks to all of
them.
We are highly indebted to JBIET for the guidance,constant supervision ,support as well as in helping us
for providing necessary information regarding the project.
We would like to express our gratitude towards our Assistant professor Srikanth Kama of JBIET for
his kind co-operation and encouragement through out the project.

31
THANK YOU