ALUMNI PORTAL

Submitted in partial fulfillment of the requirements for the award of

Bachelor of Engineering degree in Computer Science and Engineering

by

MUGUNTHAN RAJU G (38110333)

YERUVA JOSEPH SRAVAN KUMAR REDDY (38110670)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SCHOOL OF COMPUTING

SATHYABAMA

INSTITUTE OF SCIENCE AND TECHNOLOGY

(DEEMED TO BE UNIVERSITY)
Accredited with Grade “A” by NAAC

JEPPIAAR NAGAR, RAJIV GANDHI SALAI, CHENNAI - 600 119

MARCH - 2022
 DEPARTMENT OF Computer Science and Engineering

BONAFIDE CERTIFICATE

This is to certify that this Project Report is the bonafide work of Mugunthan Raju G
(Reg.No: 38110333) and Yeruva Joseph Sravan Kumar Reddy (Reg.No: 38110670)
who carried out the project entitled ―ALUMNI PORTAL‖ under my supervision from
November 2021 to April 2022.

Internal Guide

Dr. J. ALBERT MAYAN, M.E., Ph.D.

Head of the Department

Dr. L. LAKSHMANAN M.E., Ph.D.

Submitted for Viva voce Examination held on

Internal Examiner External Examiner

 DECLARATION

We Mugunthan Raju G (Reg.No: 38110333) and Yeruva Joseph Sravan Kumar Reddy

(Reg.No: 38110670) hereby declare that the Project Report entitled ALUMNI PORTAL done

by us under the guidance of Dr. J. ALBERT MAYAN, M.E., Ph.D (Internal) is submitted in

partial fulfillment of the requirements for the award of Bachelor of Engineering / Technology

Degree Computer Science and Engineering.

DATE: 000/000/00000 Mugunthan Raju G - 38110333

Yeruva Joseph Sravan Kumar Reddy - 38110670

PLACE: CHENNAI SIGNATURE OF CANDIDATES

 ACKNOWLEDGEMENT

I am pleased to acknowledge my sincere thanks to the Board of Management

of SATHYABAMA for their kind encouragement in doing this project and for
completing it successfully. I am grateful to them.

I convey my thanks to Dr. T.Sasikala M.E., Ph.D, Dean, School of Computing

Dr. L. Lakshmanan M.E., Ph.D. , and Dr.S.Vigneshwari M.E., Ph.D. Heads of
the Department of Computer Science and Engineering for providing necessary
support and details at the right time during the progressive reviews.

I would like to express my sincere and deep sense of gratitude to my Project

Guide Dr. J. Albert Mayan, M.E, Ph.D for his valuable guidance, suggestions
and constant encouragement paved the way for the successful completion of my
project work.

I wish to express my thanks to all Teaching and Non-teaching staff members of

the Department Of Computer Science and Engineering who were helpful in
many ways for the completion of the project.
 ABSTRACT

Alumni portal is providing common platform for every institute.This

project is aimed at developing an interactive system for the alumni of
particular college.The proposed system will help alumni and the concern
institution to create strong bounding through sharing their experiences,
views, ideas, guidance, motivation inputs and strategies.A system that will
be able to manage alumni data of an institution and provide easy access to
secure information at both ends.This portal highlights the feature of
communication, which will enable the current students to have interaction
with the alumni of the college for getting various updates regarding job
opportunities like industrial trends and industrial events etc. The proposed
system will be developed with an open source platform on web.This will
help the user to access the portal from any location.Few of the required web
design packages will be developed for better understanding.Various
reporting formats can be generated based on filtering strategies. The admin
panel will has all the rights to control the complete operation of system and
implement add ons if required in future.The system will automatically list all
alumni information their graduation and their status will be transferred
from the student module to the alumni module.

i
 TABLE OF CONTENT

ABSTRACT i

LIST OF FIGURES ii

LIST OF ABBREVIATIONS iii

CHAPTER No. TITLE PAGE No.

1 INTRODUCTION 1-5

1.1. AIM 1

1.2 SCOPE 2

1.3 WEB APP 2

2 LITERATURE SURVEY 6-9

2.1 RUCHIKA KOLHE 6

2.2 YUSEN LAN 6

2.3 GLORIA M. ALCANTARA 7

2.4 BASANTA JOSHI 7

2.5 S.C. VIDHATE 7

2.6 DEBAO DAI 8

2.7 RUTH G. LUCIANO 8

2.8 LUMANTI DANGOL 9

3 METHODOLOGIES 10-23

3.1 REQUIREMENTS 10

3.2 TECHNOLOGIES 11

3.3 WORK METHODOLOGY 20

4 RESULT DISCUSSION 24-35

4.1 RESULT 24

4.2 OUTPUT EXPLANATION 25

5 CONCLUSION & FUTURE WORK 36-37

5.1 CONCLUSION 36

5.2 FUTURE WORK 37

5.3 FUTURE SCOPE 37

REFERENCES 38-39

APPENDICES 40-46

A) JOURNAL SUBMISSION 40

B) PLAGIARISM REPORT 41

C) PROJECT CODE 42
 LIST OF FIGURES

S.No. FIGURE TITLE PAGE No.

3.1 System Architecture 21

3.2 Sequential Diagram 22

4.1 Login Page 25

4.2 Home Page 26

4.3 Activity Page 27

4.4 Event Page 28

4.5 Search Page 29

4.6 User Profile 30

4.7 Admin Dashboard 31

4.8 Testimonials 32

4.9 Event Control View Page 33

4.10 Testimonial Control View 34

4.11 Engagement View 35

ii
 LIST OF ABBREVIATION

SHORT FORM FULL FORM

API Application Programming Interface

CSS Cascading Style Sheets

DB DataBase

HTML HyperText Markup Language

HTTPS Hypertext Transfer Protocol Secure

JS JavaScript

JSON JavaScript Object Notation

JWT JSON Web Token

PaaS Platform as a Service

REST Representational State Transfer

SSH Secure Sockets Layer

SSR Server Side Rendering

UI User Interface

WWW World Wide Web

iii
 CHAPTER 1

INTRODUCTION

1.1 AIM OF THIS PROJECT :

Alumni associations play an essential role in higher education institutions, as

they provide networking opportunities and contact between the university and the
alumni or among the alumni. However, the lack of communication between the
alumni, faculty and the department as a whole leading to the lack of updated data
of alumni hinders the effective development of an alumni association. The lack of
data update can be tied to disinterest or ignorance of the alumni about the
potential of an alumni association to promote a professional network, academic
and even personal relationships. Similarly, the need for an effective system to
maintain these records and to update them frequently becomes increasingly
pressing as the number of students enrolled in the campus continues to increase.
One of the ways to consolidate the relationship between alumni and educational
institutions is to create a virtual and interactive portal to provide useful
information to the alumni to help extend the contact between the alumni and the
university to beyond the period of course completion, regardless of geographic
location or time.

1.1.1 OBJECTIVE :

In this project we developed an Alumni Information and Management with

various technologies which helps to keep a track of Alumni current status and
pave the way for interaction.

1
1.2 SCOPE :

To bring together all the old students and the faculty members to share their
experiences with each other which utilize the rich experiences of old students of
the college for the benefit and progress of the present students. It also helps to
provide guidance to the present students in their endeavor for better employment
and higher studies. To get the valuable advice of the Alumni in the overall
development of the college.

1.3 Web Application

1.3.1 Preface :

A website application, which is also popularly known as a web app, is a

software application program that uses web-based technology to perform specific
tasks. Remote web servers host web applications and store relevant information
from numerous connected computers. You can use a client program to run the
web applications and access or enter the required data. That is why people often
refer to web apps as client-server programs. Web applications have undergone
many developments, and the current ones are far more sophisticated in their
features and use than the earlier simplistic ones. They are also far more
indispensable for personal and business use.

1.3.2 Frontend :

Front-end web development, also known as client-side development, is the

practice of producing HTML, CSS and JavaScript for a website or Web
Application so that a user can see and interact with them directly. The challenge
associated with front end development is that the tools and techniques used to
create the front end of a website change constantly and so the developer needs
to constantly be aware of how the field is developing.

2
The objective of designing a site is to ensure that when the users open up the
site they see the information in a format that is easy to read and relevant. This is
further complicated by the fact that users now use a large variety of devices with
varying screen sizes and resolutions thus forcing the designer to take into
consideration these aspects when designing the site. They need to ensure that
their site comes up correctly in different browsers (cross-browser), different
operating systems (cross-platform) and different devices (cross-device), which
requires careful planning on the side of the developer.

1.3.3 Backend :

Web development activities that are done at the back end of programs are
referred to as back end development. Back-end development covers server-side
web application logic and integration and activities, like writing APIs, creating
libraries, and working with system components instead of frontend development,
which focuses on customer-facing services and programs. Backend developers
build code that allows a database and an application to communicate with one
another. Backend developers take care and maintain the back-end of a website,
Including databases, servers, and apps, and they control what you don't see.

Backend is the server-side of the website. It stores and arranges data, and
also makes sure everything on the client-side of the website works fine. It is the
part of the website that you cannot see and interact with. It is the portion of
software that does not come in direct contact with the users. The parts and
characteristics developed by backend designers are indirectly accessed by users
through a front-end application. Activities, like writing APIs, creating libraries, and
working with system components without user interfaces or even systems of
scientific programming, are also included in the backend.

3
1.3.4 Database :

The Database is an essential part of our life. As we encounter several

activities that involve our interaction with databases, for example in the bank, in
the railway station, in school, in a grocery store, etc. These are the instances
where we need to store a large amount of data in one place and fetch these data
easily.

A database is a collection of data that is organized, which is also called

structured data. It can be accessed or stored in a computer system. It can be
managed through a Database Management System (DBMS), a software used to
manage data. Database refers to related data in a structured form.

In a database, data is organized into tables consisting of rows and columns and it
is indexed so data can be updated, expanded, and deleted easily. Computer
databases typically contain file records data like transactions money in one bank
account to another bank account, sales and customer details, fee details of
students, and product details. There are different kinds of databases, ranging
from the most prevalent approach, the relational database, to a distributed
database, cloud database, and NoSQL databases.

1.3.5 Container:

A container is a standard unit of software that packages up code and all its
dependencies so the application runs quickly and reliably from one computing
environment to another. A Podman container image is a lightweight, standalone,

4
executable package of software that includes everything needed to run an
application: code, runtime, system tools, system libraries and settings.

Container images become containers at runtime and in the case of Podman

containers – images become containers when they run on Podman Engine.
Available for both Linux and Windows-based applications, containerized software
will always run the same, regardless of the infrastructure. Containers isolate
software from its environment and ensure that it works uniformly despite
differences for instance between development and staging.

5
 CHAPTER - 2

LITERATURE SURVEY

2.1 Ruchika Kolhe :

The proposed system is, the alumni tracking application is a web-based

system that is accessible to all alumni. It can also be used as a website/medium
for graduates and their respective college alumni coordinators to stay in touch
with each other. Important data from the alumni are solicited through this
platform. These data, particularly on their employment, can be used as bases in
making strategic decisions, i.e. curriculum revision, research agenda preparation,
potential extension activities among others. The website can be accessed using
a mobile device through which college graduates can update their current
employment status and other information. All the collected data shall be stored in
a server. There is no automata for inclusion of upcoming Alumni data.

2.2 Yusen Lan :

The current application processes and system frameworks are difficult to

solve these problems. It is necessary to transform the management model
through information gathering technology, data mining technology and social
networking platforms. In this section, we build an integrated intelligence alumni
information management system to optimize the process of alumni management,
assist school leaders in making decisions, and promote the full use of alumni
resources. This system consists of three major platforms: Alumni Social Network
Platform, Intelligent Data Acquisition and Storage Platform and Data Mining and
Auxiliary Decision-Making Platform. It doesn't support the current students to

6
level up their standards. It fulfills the social demand of modern college. It doesn't
support the current students to level up their standards.

2.3 Gloria M. Alcantara :

In this work, we are trying to develop alumni web application to established

interaction between alumni and institutes.This web application is developing in
Word press with the help of some inbuilt plugins and some own developed
plugins.The web application serve as a useful site to any institution and Alumni to
know what is going on in our college and can also know about the institute.This
portal provides access to only authorized users.The web application helps to
generate report regarding accreditation from Higher Education Committee under
government of nation . This system updates the current role of the Alumni
everytime. Here, they failed to develop the interactive Alumni Portal.

2.4 Basanta Joshi :

The main research question that the paper attempts to address is - how to
collect and maintain records of alumni with minimal requirement of centralized
data collection and manual entry. Enticing and motivating alumni, who have
graduated and busy in their own ways, to enter their latest profile is also
challenging. As a partial solution to the above problem, the main research
contribution of this work is the development and implementation of an online
system. Alumni Data are genuinely true and have been cleaned by several
processes. Manual cleaning of data makes it a tedious system.

2.5 S.C.Vidhate:
The system of alumni tracking application is a web-based system that is
accessible to all alumni. It can also serve as a website/medium for graduates and

7
their respective college alumni coordinators to stay in touch. This platform
collects critical information from alumni. These data, particularly on their
employment, can be used to inform strategic decisions, such as curriculum
revision, research agenda preparation, and potential extension activities, among
other things. A mobile device can be used to access the website, where college
graduates can update their current employment status and other information. All
collected data must be saved on a server. There are no automata for
incorporating upcoming Alumni data.

2.6 Debao Dai:

These challenges are difficult to solve using current application processes

and system frameworks. The management model must be transformed using
information gathering technology, data mining technology, and social networking
platforms. In this section, we will create an integrated intelligence alumni
information management system to optimize the alumni management process,
assist school leaders in making decisions, and promote the full utilization of
alumni resources. This system is divided into three major platforms: the Alumni
Social Network Platform, the Intelligent Data Acquisition and Storage Platform,
and the Data Mining and Auxiliary Decision-Making Platform. It does not
encourage current students to raise their standards. It satisfies the social
requirement of a modern college. It does not encourage current students to raise
their standards.

2.7 Ruth G. Luciano:

In this project, we are attempting to create an alumni web application to

facilitate interaction between alumni and institutes. This web application is being
built in Wordpress using some built-in plugins as well as some custom plugins.
The web application serves as a useful site for any institution and Alumni to learn

8
about what is going on in our college and to learn about the institute. Only
authorized users have access to this portal. The web application aids in the
generation of accreditation reports from the Higher Education Committee of the
government of the nation. Every time the system is updated, the current role of
the Alumni is updated. They failed to create an interactive Alumni Portal in this
case.

2.8 Lumanti Dangol:

The leading research topic that the paper seeks to answer is how to acquire
and manage alumni records with minimum centralized data collecting and
manual entry. It is also difficult to entice and motivate alumni who have
graduated and are busy in their own ways to enter their most recent profile. The
main scientific contribution of this work is the invention and implementation of an
online system as a partial solution to the above challenge. Alumni data are real
and have been sanitized through a number of methods. Manual data cleaning
makes it a time-consuming system.

9
 CHAPTER 3

METHODOLOGIES

3.1 REQUIREMENTS :

3.1.1 HARDWARE REQUIREMENTS :

The most common set of requirements defined by any operating system or

software application is the physical computer resources, also known as
hardware, A hardware requirements list is often accompanied by a hardware
compatibility list (HCL), especially in case of operating systems. An HCL lists
tested, compatible, and sometimes incompatible hardware devices for a
particular operating system or application.

01. CPU‘s Processor : Min Pentium IV

02. RAM : Min 4 GB (Main Memory)
03. Processor‘s Clock Speed : 2.4 GHz
04. Storage Memory : Min 30 GB
05. Mouse : At least Trackball Mouse
06. Keyboard : QWERTY Keys
07. Monitor Display : IPS display
08. Network Speed : Min 2 Gbps

3.1.2 SOFTWARE REQUIREMENTS

Software requirements deal with defining software resource requirements and

prerequisites that need to be installed on a computer to provide optimal

10
 functioning of an application. These requirements or prerequisites are generally
not included in the software installation package and need to be installed
separately before the software is installed.

01. Operating System : Windows / Mac OS / Linux distros

02. IDE : Visual Studio Code
03. Browser : Chrome / Firefox / Safari / Opera
04. API Validator : Thunder Client

3.2 TECHNOLOGIES :

3.2.1 FRONTEND :

3.2.1.1 HTML :

HTML (HyperText Markup Language) is the most basic building block

of the Web. It defines the meaning and structure of web content. Other technologies
besides HTML are generally used to describe a web page's
appearance/presentation or functionality/behavior. "Hypertext" refers to links that
connect web pages to one another, either within a single website or between
websites. Links are a fundamental aspect of the Web. By uploading content to the
Internet and linking it to pages created by other people, you become an active
participant in the World Wide Web. Web browsers receive HTML documents from a
web server or from local storage and render the documents into multimedia web
pages. HTML describes the structure of a web page semantically and originally
included cues for the appearance of the document. HTML elements are the building
blocks of HTML pages. With HTML constructs, images and other objects such as
interactive forms may be embedded into the rendered page. HTML provides a
means to create structured documents by denoting structural semantics for text such
as headings, paragraphs, lists, links, quotes and other items. HTML elements are

11
delineated by tags, written using angle brackets. Tags such as <img /> and <input />
directly introduce content into the page. Other tags such as <p> surround and
provide information about document text and may include other tags as sub-
elements. Browsers do not display the HTML tags but use them to interpret the
content of the page.

3.2.1.2 CSS :

CSS is designed to enable the separation of presentation and content,

including layout, colors, and fonts. This separation can improve content accessibility;
provide more flexibility and control in the specification of presentation characteristics;
enable multiple web pages to share formatting by specifying the relevant CSS in a
separate .css file, which reduces complexity and repetition in the structural content;
and enable the .css file to be cached to improve the page load speed between the
pages that share the file and its formatting. Separation of formatting and content also
makes it possible to present the same markup page in different styles for different
rendering methods, such as on-screen, in print, by voice (via speech-based browser
or screen reader), and on Braille-based tactile devices. CSS also has rules for
alternate formatting if the content is accessed on a mobile device. The name
cascading comes from the specified priority scheme to determine which style rule
applies if more than one rule matches a particular element. This cascading priority
scheme is predictable.

3.2.1.3 Javascript :

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled

programming language with first-class functions. While it is most well-known as the
scripting language for Web pages, many non-browser environments also use it, such
as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based,
multi-paradigm, single-threaded, dynamic language, supporting object-oriented,
imperative, and declarative (e.g. functional programming) styles. Read more about

12
JavaScript. This section is dedicated to the JavaScript language itself, and not the
parts that are specific to Web pages or other host environments. For information
about API specifics to Web pages, please see Web APIs and DOM. The standards
for JavaScript are the ECMAScript Language Specification (ECMA-262) and the
ECMAScript Internationalization API specification (ECMA-402). The JavaScript
documentation throughout MDN is based on the latest draft versions of ECMA-262
and ECMA-402. And in cases where some proposals for new ECMAScript features
have already been implemented in browsers, documentation and examples in MDN
articles may use some of those new features.

3.2.1.4 React JS :

ReactJS is a declarative, efficient, and flexible JavaScript library for

building reusable UI components. It is an open-source, component-based front end
library responsible only for the view layer of the application. It was created by Jordan
Walke, who was a software engineer at Facebook. It was initially developed and
maintained by Facebook and was later used in its products like WhatsApp &
Instagram. Facebook developed ReactJS in 2011 in its news feed section, but it was
released to the public in the month of May 2013. Today, most of the websites are
built using MVC (model view controller) architecture. In MVC architecture, React is
the 'V' which stands for view, whereas the architecture is provided by Redux or Flux.

A ReactJS application is made up of multiple components, each component

responsible for outputting a small, reusable piece of HTML code. The components
are the heart of all React applications. These Components can be nested with other
components to allow complex applications to be built of simple building blocks.
ReactJS uses a virtual DOM based mechanism to fill data in HTML DOM. The virtual
DOM works fast as it only changes individual DOM elements instead of reloading
complete DOM every time. To create React apps, we write React components that
correspond to various elements. We organize these components inside higher level
components which define the application structure. For example, we take a form that

13
consists of many elements like input fields, labels, or buttons. We can write each
element of the form as React components, and then we combine it into a higher-
level component, i.e., the form component itself. The form components would
specify the structure of the form along with elements inside of it.

3.2.1.5 Material UI :

Material UI is an open-source, front-end framework for React

components that has 60,500 plus stars on github. It is built using Less. Less (stands
for Leaner Style Sheets), is a backward-compatible language extension for CSS.
Material UI is based on Google‘s Material Design to provide a high-quality, digital
experience while developing front-end graphics. Material Design focuses on
providing bold and crisp designs – it builds textures by focusing on how the
components cast shadows and reflect light. Some frontend frameworks are not very
well documented, this makes it hard to develop with them. However, Material UI has
detailed documentation that makes it easy to navigate through the framework.
Material UI stays recent with regular updates. At the time this article was written, the
most recent update was v4.11.0 (dated July 1, 2020). The components throughout
are consistent in design and color tones, which allows the developed
application/webpage to look aesthetically appealing.

3.2.1.6 Webpack :

Webpack is a static module bundler for JavaScript applications that

takes all the code from your application and makes it usable in a web browser.
Modules are reusable chunks of code built from your app‘s JavaScript,
node_modules, images, and the CSS styles which are packaged to be easily used in
your website. Webpack separates the code based on how it is used in your app, and
with this modular breakdown of responsibilities, it becomes much easier to manage,
debug, verify, and test your code. When Webpack processes your application, it

14
builds a dependency graph which maps out the modules that your project needs and
generates one or more bundles. A bundle is a distinct grouping of connected code
that has been compiled and transformed for the browser. If one file depends on
another (it uses the code from a separate file). Webpack also takes your non-code
assets (img, fonts, styles, etc.) and converts them to dependencies for your
application.

3.2.2 BACKEND :

3.2.2.1 Node JS :

Node.js is an open-source and cross-platform JavaScript runtime

environment. It is a popular tool for almost any kind of project! Node.js runs the V8
JavaScript engine, the core of Google Chrome, outside of the browser. This allows
Node.js to be very performant. A Node.js app runs in a single process, without
creating a new thread for every request. Node.js provides a set of asynchronous I/O
primitives in its standard library that prevent JavaScript code from blocking and
generally, libraries in Node.js are written using non-blocking paradigms, making
blocking behavior the exception rather than the norm. When Node.js performs an I/O
operation, like reading from the network, accessing a database or the filesystem,
instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume
the operations when the response comes back. This allows Node.js to handle
thousands of concurrent connections with a single server without introducing the
burden of managing thread concurrency, which could be a significant source of
bugs.

Node.js has a unique advantage because millions of frontend developers that write
JavaScript for the browser are now able to write the server-side code in addition to
the client-side code without the need to learn a completely different language. In
Node.js the new ECMAScript standards can be used without problems, as you don't
have to wait for all your users to update their browsers - you are in charge of

15
deciding which ECMAScript version to use by changing the Node.js version, and you
can also enable specific experimental features by running Node.js with flags.

3.2.2.2 NPM :

Node-Packet-Manager is two things: first, it is an online repository for

the publishing of open-source Node.js projects; second, it is a command-line utility
for interacting with said repository that aids in package installation, version
management, and dependency management. A plethora of Node.js libraries and
applications are published on npm, and many more are added every day. These
applications can be searched for on https://www.npmjs.com/. Once you have a
package you want to install, it can be installed with a single command-line
command. If you are developing the Next Great Application. You come across a
problem, and you decide that it's time to use that cool library you keep hearing about
- let's use Caolan McMahon's async as an example. Thankfully, npm is very simple
to use: you only have to run npm install async, and the specified module will be
installed in the current directory under ./node_modules/. Once installed to your
node_modules folder, you'll be able to use require() on them just like they were built-
ins.

Another important use for npm is dependency management. When you have a node
project with a package.json file, you can run npm install from the project root and
npm will install all the dependencies listed in the package.json. This makes installing
a Node.js project from a git repo much easier!

3.2.2.3 Express JS :

Express.js is a free and open-source web application framework for

Node.js. It is used for designing and building web applications quickly and easily.
Web applications are web apps that you can run on a web browser. Since Express.js
only requires javascript, it becomes easier for programmers and developers to build

16
web applications and API without any effort. Express.js is a framework of Node.js
which means that most of the code is already written for programmers to work with.
You can build a single page, multi-page, or hybrid web applications using Express.js.
Express.js is lightweight and helps to organize web applications on the server-side
into a more organized MVC architecture.

It is important to learn javascript and HTML to be able to use Express.js. Express.js

makes it easier to manage web applications.It is a part of a javascript based
technology called MEAN software stack which stands for MongoDB, ExpressJS,
AngularJS, and Node.js. Express.js is the backend part of MEAN and manages
routing, sessions, HTTP requests, error handling, etc. The JavaScript library of
Express.js helps the programmers to build efficient and fast web apps. Express.js
enhances the functionality of the node.js. It has made programming in node.js
effortless and has given many additional features.

3.2.3 DATABASE :

3.2.3.1 MongoDB :

MongoDB is an open source NoSQL database management program.

NoSQL is used as an alternative to traditional relational databases. NoSQL
databases are quite useful for working with large sets of distributed data. MongoDB
is a tool that can manage document-oriented information, store or retrieve
information. MongoDB supports various forms of data. Instead of using tables and
rows as in relational databases, the MongoDB architecture is made up of collections
and documents.

3.2.3.1 Firebase :

Firebase is a development platform known originally for its realtime

database that‘s still at its core a multi-node, key-value database optimized for

17
synchronizing data, often between user machines or smartphones and centralized
storage in the cloud. It‘s designed to make life easier for developers by handling
much of the pushing and pulling of data. That relieves app developers of the
programming burdens associated with managing versions or locations. They can
write the new bits to Firebase and the data will be consistent throughout the system.
Firebase is valued largely because it can constantly propagate and synchronize
changes between local copies of information stored on users‘ machines with
versions kept in the cloud.

3.2.4 SECURITY :

3.2.4.1 JWT Authentication:

A JSON web token is JSON (JavaScript object notation) with some

extra structure. JWTs include a header and payload that use the JSON format.
Optionally, the tokens can be encrypted or signed with a message authentication
code (MAC). Signed tokens are commonly referred to as JSON web signatures
(JWS) and encrypted tokens as JSON web encryption (JWE). The JWT is formed by
concatenating the header JSON and the payload JSON with a ―.‖ and optionally
appending the signature. The whole string is then base64 URL encoded.

3.2.5 TEST FRAMEWORKS :

3.2.5.1 Postman :

Postman is an application for testing APIs, by sending request to the

web server and getting the response back. API testing is used to determine whether
the output is well-structured and useful to another application or not, checks the
response on the basis of input (request) parameter, and checks how much time the
API is taking to retrieve and authorize the data too. It allows users to set up all the

18
headers and cookies the API expects, and checks the response. Productivity can be
increased using some of the Postman features, which are listed below. A test in
Postman is fundamentally a JavaScript code, which runs after a request is sent and
a response has been received from the server.

3.2.5.2 JEST :

Jest is an open-source testing framework built on JavaScript, designed

majorly to work with React and React Native based web applications. Often, unit
tests are not very useful when run on the frontend of any software. This is mostly
because unit tests for the front-end require extensive, time-consuming configuration.
This complexity can be reduced to a great extent with the Jest framework.

Moreover, Jest can be used to validate almost everything around JavaScript,

especially the browser rendering of web-applications. Jest is also widely preferred
for automated browser testing, making it one of the most popular Javascript testing
frameworks in existence. Additionally, Jest provides a blended package of an
assertion library along with a test runner and a built-in mocking library. It stands out
by virtue of its simplicity, which makes it an ideal tool to test JavaScript Library
Projects such as AngularJS, Vue JS, Node JS, Babel and TypeScript.

3.2.6 CLOUD PLATFORM:

3.2.6.1 Heroku :

Heroku is known for running apps in dynos – which are really just
virtual computers that can be powered up or down based on how big your
application is. Think of dynos as malleable building blocks for running your app.If
you want to process more data or run more complex tasks, you are going to need to
add more blocks(what is called scaling horizontally) or increase the size of the
blocks (what is called scaling vertically). Heroku then charges you a monthly fee

19
based on the number of dynos that you have and the size of each dyno. Although
Heroku charges you by the dyno, they aren‘t actually hosting your app. In fact, the
entire Heroku platform, as well as every app built on Heroku is deployed to Amazon
Web Services(AWS).

3.2.7 CONTAINERIZATION:

3.2.7.1 Docker:

Docker is an open source containerization platform. It enables

developers to package applications into containers—standardized executable
components combining application source code with the operating system (OS)
libraries and dependencies required to run that code in any environment. Containers
simplify delivery of distributed applications, and have become increasingly popular
as organizations shift to cloud-native development and hybrid multi cloud
environments.

Developers can create containers without Docker, but the platform makes it easier,
simpler, and safer to build, deploy and manage containers. Docker is essentially a
toolkit that enables developers to build, deploy, run, update, and stop containers
using simple commands and work-saving automation through a single API. Docker
also refers to Docker, Inc. (link resides outside IBM), the company that sells the
commercial version of Docker, and to the Docker open source project (link resides
outside IBM), to which Docker, Inc. and many other organizations and individuals
contribute.

3.3 Work Methodology :

Alumni portal connects with both staff,juniors,seniors and with management .

Alumni portal runs on a backend server using nodejs and expressjs. It has 3 types of
users with specified permissions i.e Admin,Alumni,Student. Each user has separate

20
permissions to modify or add any type of data.There are several endpoints to make
every action.

Fig 3.1 System Architecture

In the front end There are Login/Logout, Signup pages.Form data will be validated
by the front-end before being sent to the back-end.This reduces the useless
requests to the backend. Depending on User‘s roles (admin, moderator, user),
Navigation Bar changes its items automatically.When the request is passed to
backend , backend contacts server and the node.js server validates the username
and password. As this is one time authentication , a jwt token is generated and
passed back to front which is used for further authentication purposes. This
technique reduces the load on database and server as jwt carries auth details for the
user every time.

JWT token is being stored in local storage of the browser and used on every api call.
If the credentials are rejected by the server , front-end handles the issue by showing

21
an error pop-up the user by appropriate error message that is passed the back-
end.Once the user is logged in, each subsequent request will include the JWT,
allowing the user to access routes, services, and resources that are permitted with
that token. Single Sign On is a feature that widely uses JWT nowadays, because of
its small overhead and its ability to be easily used across different domains.

Fig 3.2 Sequential Diagram

In the back-end there are 3 types of endpoints 1. User Endpoints 2. Admin

Endpoints 3. Dev Endpoints . User Endpoints are used to have basic auth and any
user with a valid auth token can access these endpoints. Admin endpoints can only
be accessed by the users with valid admin token this adds additional security to
prevent any user from manipulating the database. Admins can ban the users and the

22
front end keeps checking the ban endpoint to make sure the user has access to the
token.

Search uses.Indexes are special data structures that store a small portion of the
collection's data set in an easy to traverse form. The index stores the value of a
specific field or set of fields, ordered by the value of the field. The ordering of the
index entries supports efficient equality matches and range-based query operations.
In addition, MongoDB can return sorted results by using the ordering in the index.
The returned items are then rendered on the front end to show the users that relate
to the search parameters.

23
 CHAPTER 4

RESULT DISCUSSION

4.1 : RESULT :

Admittedly, alumni are valuable assets of the institutions of higher education.

Thus, the more alumni communication is intact the greater opportunities for
feedback and knowledge development. An alumni portal facilitates the promotion
of research, the exchange of experience, in addition to providing personal,
professional and academic networking. The developers decided to create the
Alumni Portal System to help the university to track the alumni and to gather their
information thru online portal without hassle.

Alumni can use their own personal computers devices to add, monitor and
update their current status. In view of the above, the developers would like to
recommend that additional verification procedures be made to ensure that Only
bonafide alumni can register in the system. Main innovations encompass the
inclusion not only of the alumni, but also the current students to the alumni portal,
therefore, the link with the university is strengthened from the beginning with a
tendency to bolster the bond between the students (current and alumni) and the
educational institution.

24
4.2 OUTPUT EXPLANATION:

4.2.1 Login Page :

Fig 4.1 Login Page

A login page could be a web page or a section page to an online site

that requires client distinguishing proof and verification, frequently performed by
entering a username and password combination. Logins may give access to a
whole location or portion of the website . Logging in not as it were gives location
to for the client, but too permits the site to track client activities and behavior.
Logging off a webpage or location may be manual by the client or they can
happen naturally when certain conditions (such as closing the page, turning off
the computer, a long time delay, happen Here, login takes place with the help of
JSON Web Token which ensures security of the web application. Initially it takes
a username password to verify whether a given username really exists or not,

25
 after it checks the given password against that username. Above process will
avoid vulnerabilities, third party access and mal-users. This will act as a first line
of defense with a gateway which allows authorized users and admins to access
the Alumni Portal web application.

4.2.2 Home Page :

Fig 4.2 Home Page

A landing page is the first page of a website. When you visit a web
URL that merely contains a domain name, this is the default page that loads. The
root directory of a website houses the home page. The home page on most web
servers can have a variety of filenames. Although there is no set structure for a
home page, most feature a navigation bar with links to other areas of the website. A
search bar, information about the website, and current news or changes are all
frequent characteristics seen on a home page. Some websites include material that

26
is updated on a daily basis. It is the page that visitors find themselves in when they
load a URL. Web managers can control the home page as a way of directing the
user experience.

4.2.3 Activity Page :

Fig 4.3 Activity Page

Here, we can find activities which bring engagement among graduates,

current students as well as college staff members. There are lots of things to do in
the activities section.
➢ Organize events, competitions, hackathons which induce winning mindset
among current students.
➢ Making donations to the institute helps to raise funds for scholarships,
develop a good infrastructure for student and staff betterment.
➢ Planning the curriculum and syllabus is so vital for currently pursuing students
to gain knowledge for current industry standards.

27
 ➢ Mentoring students will help them improve themselves and make them
acquire industry expected knowledge.
➢ Workshops act as a great platform to learn anything and provide them to
demonstrate the things that they learn.
➢ Testimonials showcase value and things gained by the graduates when they
were pursuing in the institute.

4.2.4 Events Page :

Fig 4.4 Event Page

Events and competition opportunities are great for students who want
to show their abilities and talents. Competitions play an important role in pushing
students to succeed and excel by providing much more than simply the winning
prize. Competitions provide players with the opportunity to obtain valuable
experience, demonstrate abilities, assess and evaluate outcomes, and discover
personal potential. Competitions also motivate pupils to try new things and improve
their ideas and talents. The lesson to be learned is that when we‘re struggling to go
on, we can look back at our past achievements and how good it felt to get there.

28
Competition allows us to use our previous triumphs as an added boost to keep
pushing forward during difficult times in everything we choose to pursue.

4.2.5 Search Page :

Fig 4.5 Search Page

Search for Alumni is so important for students and institutes because

to pick a great person will definitely leave a good impact for both. Site search is a
feature that allows visitors to quickly and effectively search the content or product
catalogs of a specific website. A fantastic site search tool is one that is personalized
to the unique website. A smart site search not only regularly indexes the site to
guarantee the most recent information is immediately available, but it also directs
visitors as they explore a website's content, assisting them in discovering stuff they
may not have even realized they were interested in. Search bars are a crucial aspect

29
of website functioning and appearance, and most of us would find it strange to use a
website without one. A search bar is a no-brainer when developing a website, but
genuinely useful site search is much more than that.

4.2.6 User Profile :

Fig 4.6 User Profile

Personal information may be included in a user profile. Most user

profiles include a set of criteria that are either required or optional. In certain
circumstances, the user profile may have many parts and tabs. Administrators often
monitor and manage user profiles in the case of software applications or network-
related applications. In certain situations, they are kept up to date by the users
themselves. The user profile allows the system to be personalized and can assist in
tailoring certain features to his or her needs. A user profile may typically be used to
determine a person's preferences and requirements.

30
User profiles have information for most attributes like system needs, general data,
restrictions and application settings.

It can help in specifying the terms for certain features in the system such as profile
visibility, layout view, color themes, preferred languages, date format and message
display format. User profiles can be created, modified and deleted. Most user
profiles have a user description like account details, user details and password-
related information. In most circumstances, the user profile aids in providing users
with additional security. Users can build authentication measures using various
characteristics in their user profile, such as a secret question or password. With
most apps, a user profile can also aid in password recovery or the establishment of
a new password for users.

4.2.7 Admin Dashboard :

Fig 4.7 Admin Dashboard

31
 Admin Pages display in the administration area. Appropriate menus
and other styling appear is necessary for the content. The admin panel contains your
build and can be found on your App Dashboard. It exists in order to give you control
over your app once it's built.

It was started by creating the backend data models, admin, as well as APIs, then
adding them to the admin panel. The server side will serve as the main first
deliverable and makes for good pages. You can build the entire backend in just an
hour or two if you have already planned the app out: you‘re just clicking on a data
entry.

4.2.8 Testimonials :

Fig 4.8 Testimonials

32
 A testimonial is a third party statement that comments on how good
someone or something is. By strategically placing website testimonials on a
dedicated ‗Testimonials‘ page, as well as on your ‗About Us‘ page, product pages,
and more, you can convince interested users that you‘re worth their trust. In fact,
reaffirming your product‘s worth is one of the key techniques in the psychology of
selling.

4.2.9 Event Control View :

Fig 4.9 Event Control View Page

33
 From here only admin can control the event display and event deletion
from the admin dashboard which will make sure those events are current and
errorless. This made an admin work easier by having an eye on event sequence
data. A benefit of having everything in a single place is that all your information is
positioned in a specific order, making it easier for your audience to navigate your
website and get all the information they can get when they interact with your brand.
It‘s easy to scroll through and doesn‘t take much time to find what you‘re looking for.

4.2.10 Testimonial Control View :

Fig 4.10 Testimonial Control View

34
 From here only admin can control the testimonial display and
testimonial deletion from the admin dashboard which will make sure those
testimonials are errorless. This made an admin work easier by having an eye on
testimonials sequence data.

4.2.10 Engagement Control View :

Fig 4.11 Engagement View

In this page an admin can see the Alumni activities and involvements
in the form of engagement in the event, planning and so on. This page shows

35
different types of alumni activities and their details over here which brings a new
feature called single page rendering. Admin can verify the details whether it is a
genuine form application or a spam form application so that admin can ban that user
which makes sure the geniality.

36
 CHAPTER 5

CONCLUSION AND FUTURE WORK

5.1 CONCLUSION :

School can be expensive and we all know it‘s hard work. People may not
realize it, but education is so much more than just the qualifications you receive
at the end. It‘s about the lessons you learn, the people you meet, and the
relationships you build. So why would you expect to leave all of that behind after
graduation? Alumni networks provide long-term value to an educational
institution by giving alumni the chance to stay in contact and continue to learn
from each other long after they have left school. Support networks are hard to
come by out there in the world and having a ready-made one full of people with
shared experiences just waiting to connect is a luxury that few can afford to turn
down. When you can, join your school‘s alumni network.

Due to the need to connect all alumni (students who have already passed) to the
organization, it was possible to share their perspectives, experiences,
orientations, ideas, strategies and motivations. The focus of the alumni portal app
is on the interaction between graduates and current students at the university. In
this way, students or alumni can get to know each other and their current
activities. This portal focuses on the interaction/communication feature that
allows the current students to interact with the alumni of the university or
organization to get various updates on current industry trends, internship
opportunities, project sponsorships and multiple references opening up in the
company World. Therefore, in this project, we developed a dynamic alumni portal
design that enables two-way interaction between all students and all students.

37
5.2 FUTURE WORK :

The proposed work in the Alumni Portal will make the Alumni data available in
an organized web application which will help current students and college staff
members to know instantly about them. However there are some other further
plans like including current students as future alumni in this portal, engagement
point system, referral system for current students to get their internship/job which
makes effort much more easier.

5.3 FUTURE SCOPE :

● This alumni portal would provide a common platform for interaction of

college related members.
● Virtual alumni meetings.
● Job posting.
● Internships.
● Industry sponsored projects.
● Entrepreneurial guidance.
● Portal provides active user status, chat rooms, personal chatting &
messaging.

38
 REFERENCES

[1] D Yang, Research on Alumni Resources' Effect in Colleges and Universities

Development.Value Engineering, 8(2013)975-975.

[2] D. Mijic and D. Jankovic, ―Towards Improvement of the Study Programme

Quality: Alumni Tracking Information System,‖ in ICT Innovations 2011, L.
Kocarev, Ed. Berlin, Heidelberg: Springer Berlin Heidelberg, 2012, pp. 291–300.

[ ] A. akio glu, M. uksel, . Akda g, and A. N. Canel, ―Alumni tracker as a

system in higher education: a survey on alumni of Marmara University Atat urk
Education Faculty,‖ uksek o gretim Dergisi, vol. , no. 2, pp. –79, 2011.

[4] X.D Lei, Role of Alumni Resources in the Development of Colleges and
Universities. Journal of Fujian Institute of Education, 11(2010)24-26.

[5] N Rubens, M Russell and R Perez, J. Huhtamaki, Still, K., Kaplan, D. and
Okamoto, T. Alumni network analysis. Global Engineering Education
Conference, (2011) 606-611.

[6] K.J Dochen, The University of Texas Elementary School : designing an

alumni tracking system. (2012).

[7] G.O Moden, W.A. Michael, Applying alumni research to decision making. New
Directions for Institutional Research, 1988(2010)67-76.
[8] H Chi, E.L Jones and L.P Grandham, Enhancing mentoring between alumni
and students via smart alumni system. procedia computer science, 9(2012)1390-
1399.

39
[9] S Hall, Educational ties, social capital and the translocal (re)production of
MBA alumni networks. Global-Networks, 11-(2011)118-138.

[10] Kowalik, E. Engaging alumni and prospective students through social media.
Cutting-Edge Technologies in Higher Education, 2(2011)211-227.

[11] V. Rattanamethawong, S. Sindhu Pinyo, Chandrachai, E.A. An innovation

system that can quickly respond to the needs of students and alumni. Procedia -
Social and Behavioral Sciences, 182(2015) 645-652.

40
 APPENDICES

A) RESEARCH PAPER - JOURNAL SUBMISSION :

41
B) PLAGIARISM REPORT :

42
C) SAMPLE CODE :

import classes from "./HomePage.module.css";

import HomeTile from "./HomeTile";
import Divider from "../GlobalComponents/Divider/Divider";
import EventSlider from "./EventSlider/EventSlider";
import Carousel from "react-elastic-carousel";
import "./elastic_carousel.css";
import SearchWidget from "./SearchWidget/SearchWidget";
import { useNavigate } from "react-router";
import FullCarousel, {
CarouselItem,
TestimonialItem,
} from "./Carousel/FullCarousel";
import { useEffect } from "react";
import { getController } from "../GlobalServices/apiController";
import Testimonials from "./Testimonials/Testimonials";
function HomePage({ loader, setToken }) {
const imageLinks = [
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
"https://images.unsplash.com/photo-1541339907198-
e08756dedf3f?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=f
ormat&fit=crop&w=1170&q=80",
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg",
];

43
useEffect(() => {
async function fetchData() {
const request = await getController("/user/isUserBanned", {
id: localStorage.getItem("id"),
});
console.log(request.data);
if (request.data === true) {
if (request.data != localStorage.getItem("ban")) localStorage.clear();
setToken("");
}
}
fetchData();
}, []);
return (
<div className={classes.body}>
{/* Carousel */}
<div className="w-full ">
<FullCarousel>
{imageLinks.map((link) => {
return (
<img className="object-fill h-96" src={link} alt="" srcset="" />
);
})}
{/* <CarouselItem>Item 1</CarouselItem>
<CarouselItem>Item 2</CarouselItem>
<CarouselItem>Item 3</CarouselItem>
<CarouselItem>Item 4</CarouselItem>
<CarouselItem>Item 5</CarouselItem>
<CarouselItem>Item 6</CarouselItem>
<CarouselItem>Item 7</CarouselItem>
<CarouselItem>Item 8</CarouselItem> */}

44
 </FullCarousel>
</div>
{/* <div className={classes.sliders}>
<Sliders></Sliders>
</div> */}
<Divider />
{/* Engage with your college */}
<h1 className={classes.h2}>Engage with your college</h1>
<div className={classes.cards}>
<HomeTile
iconName={`fas fa-map-marker-alt fa-7x`}
title="Organize"
darkColor="rgb(189,76,27)"
lightColor="rgb(240,145,61)"
desc="Organize an event in you college"
navigateTo="/organize"
></HomeTile>
<HomeTile
iconName={`fas fa-rupee-sign fa-7x`}
title="Donate"
darkColor="#090979"
lightColor="rgb(168,209,223)"
desc="Donate anything"
navigateTo="/donate"
></HomeTile>
<HomeTile
iconName={`fas fa-pencil-ruler fa-7x`}
title="Plan"
darkColor="rgb(42,105,94)"
lightColor="rgb(140,231,140)"
desc="Have an idea ? Lets Plan it together"

45
 navigateTo="/plan"
></HomeTile>
<HomeTile
iconName={`fas fa-user-graduate fa-7x`}
title="Mentor"
darkColor="rgb(229,89,52)"
lightColor="rgb(243,111,114)"
desc="Guide your juniors for a better career"
navigateTo="/mentor"
></HomeTile>
<HomeTile
iconName={`fas fa-hammer fa-7x`}
title="Workshop"
darkColor="rgb(43,28,47)"
lightColor="rgb(79,134,169)"
desc="Conduct a workshop in college"
navigateTo="/workshop"
></HomeTile>
<HomeTile
iconName={`fas fa-heart fa-7x`}
title="Testimonial"
darkColor="red"
lightColor="rgb(243,111,114)"
desc="Write a review for your college"
navigateTo="/testimonial"
></HomeTile>
</div>
<EventSlider />
<SearchWidget></SearchWidget>
<Testimonials />
<div className="font-bold">v0.0.1</div>

46
 </div>
);
}

export default HomePage;

47