MAJOR
PROJECT
PLACEMENT MANAGEMENT SYSTEMA Project
Report Submitted in Partial Fulfilment of the Requirement for the
Award of the Degree of Bachelor of Engineering under B.P.U.T
Guide By:
Mr. Jyoti Ranjan Rout
SUBMITTED BY:
SUBHANIKTA PATTANAYAK
Regd.No:1901225071
(DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING)
BALASORE COLLEGE OF ENGINEERING AND TECHNOLOGY
SERGARH-756060, YEAR-2023
1
CERTIFICATE
BALASORE COLLEGE OF ENGINEERING & TECHNOLOGY
BALASORE, ODISHA
This is to certify that the project entitled “PLACEMENT
MANAGEMENT SYSTEM” submitted by SUBHANIKTA
PATTANAYAK to the Balasore College of Engineering &
Technology, in partial fulfilment for the award of degree of
Bachelor of Technology (Computer Science & Engineering). The
project has fulfilled all the requirement as per the regulation of
the Institute.
INTERNAL GUIDE HOD EXTERNAL EXAMINER
2
ACKNOWLEDGEMENT
We gratefully acknowledge for the assistance, co-operation,
guidance and clarification provided by during the development of
the PLACEMENT MANAGEMENT SYSTEM. Our extreme
gratitude to Mr. Jyoti Ranjan Rout who guided us throughout the
project. Without his willing disposition, spirit of accommodation,
frankness, timely clarification and above all faith in us, this project
could not have been completed in due time. His readiness to
discuss all importance matters at work deserves special attention.
We would also like to thank whole of the faculty of the college for
their co-operation and important support.
DEPOSITED BY
NAME: SIGNATURE:
SUBHANIKTA PATTANAYAK
3
DECLARATION
We the undersigned here by declare that the project report entitled
“PLACEMEMENT MANAGEMENT SYSTEM” is designed, written
and submitted by us in partial fulfilment of the requirement for the
award of the degree of bachelor of computer science is our original
work. The empirical findings in the report are based on data
collected by us through discussion with the project guide. We
understand that, any such copying is liable to us punishment in way
the university deems fit.
Place: Balasore Yours Faithfully, SUBHANIKTA PATTANAYAK
4
TABLE OF CONTENTS
ABSTRACT
⮚INTRODUCTION
⮚OBJECTIVE
⮚FUNCTIONALITIES
⮚SYSTEM ANALYSIS AND SPECIFICATION
o SRS
o Requirement of the new system
o Hardware and Software
requirements ⮚FEASIBILITY STUDY
⮚SYSTEM DESIGN
o Data model
o Entity-relationship model
o Data flow diagram
⮚SAMPLE CODING
⮚SAMPLE OUTPUT
⮚REFERENCE
⮚CONCLUSION
5
ABSTRACT
The purpose of the Placement Management System is to automate the existing manual
system by the help with computerized equipments and full-fledged computer software,
fulfilling their requirements, so that their valuable data/information can be stored for a
longer period with easy accessing and manipulation of the same. The required software
and hardware are easily available and easy to work with.
Placement Management System, as described above, can lead to error free, secure,
reliable and fast management system. It can assist the user to concentrate on their other
activities rather to concentrate on the record keeping. Thus it will help organization in
better utilization of resources. The organization can maintain computerized records
without redundant entries. That means that one need not be distracted by information
that is not relevant, while being able to reach the information.
6
1. INTRODUCTION
The "Placement Management System " has been developed to override the problems
prevailing in the practicing manual system. This software is supported to eliminate and
in some cases reduce the hardships faced by this existing system. Moreover this system
is designed for the particular need of the company to carry out operations in a smooth
and effective manner.
The application is reduced as much as possible to avoid errors while entering the data.
It also provides error message while entering invalid data. No formal knowledge is
needed for the user to use this system. Thus by this all it proves it is user-friendly.
Placement Management System , as described above, can lead to error free, secure,
reliable and fast management system. It can assist the user to concentrate on their other
activities rather to concentrate on the record keeping. Thus it will help organization in
better utilization of resources.the
Every organization, whether big or small, has challenges to overcome and manage the
information of Placement, Training, Colleges, Users, Registration. Every Placement
Management System has different Training needs, therefore we design exclusive
employee management systems that are adapted to your managerial requirements. This
is designed to assist in strategic planning, and will help you ensure that your
organization is equipped with the right level of information and details for your future
goals. Also, for those busy executive who are always on the go, our systems come with
remote access features, which will allow you to manage your workforce anytime, at all
times. These systems will ultimately allow you to better manage resources.
7
2. OBJECTIVES
The main objective of the Project on the Placement Management System is to manage
the details of Training, Placement, Company, Colleges, and Registration. It manages
all the information about Training, Users, Registration, and Training. The project is
totally built at the administrative end and thus only the administrator is guaranteed
access. The purpose of the project is to build an application program to reduce the
manual work for managing the Training, Placement, Users, and Company. It tracks all
the details about the Company, Colleges, and Registration.
3. FUNCTIONALITIES
∙ Provides the searching facilities based on various factors. Such as Training, ∙
Company, Colleges, Registration
∙ Placement Management System also manage the Users details online for
Colleges details, Registration details and , Training. It tracks all the information
of Placement, Users, Colleges ect
∙ Manage the information of Placement
∙ Shows the information and description of the Training, Company ∙
To increase efficiency of managing the Training, Placement
∙ It deals with monitoring the information and transactions of Colleges. ∙
Manage the information of Training
∙ Editing, adding and updating of Records is improved which results in proper ∙
Resource management of Training data.
∙ Manage the information of Colleges
∙ Integration of all records of Registration.
8
4. SYSTEM ANALYSIS AND SPECIFICATION
4. a. SRS:
The Software Requirements Specification is produced at the culmination of the analysis
task. The function and performance allocated to software as part of system engineering are refined
by establishing a complete information description, a detailed functional and behavioral
description, an indication of performance requirements and design constraints, appropriate
validation criteria, and other data pertinent to requirements.
The proposed system has the following requirements:
∙ System needs to store information about the new entry of Training. ∙ System
needs to help the internal staff to keep inform of Placement and find ∙ Them as
per various queries.
∙ System needs to maintain quantity records.
∙ System needs to keep the record of the Company.
∙ System needs to update and delete the record.
∙ System also needs a search area.
∙ It also needs a security system to prevent data.
4. b. Requirement of the new system
The old manual system was suffering from a series of drawbacks. Since the whole of
the system was to be maintained with hands the process of keeping, maintaining, and
retrieving the information was very tedious and lengthy. The records were never used
to be in a systematic order. There used to be lots of difficulties in associating any
particular transaction with a particular context. If any information was to be found it
was required to go through the different registers, and documents there would never
exist anything like report generation. There would always be unnecessary consumption
of time while entering records and retrieving records. One more problem was that it was
very difficult to find errors while entering the records. Once the records were entered it
was very difficult to update these records.
9
4. c. Hardware and Software requirements
Software requirements
Name of component
Operating System
Specification
Windows 10, Windows 11
Backend Language
Java 1.8
Frontend Language
HTML 5, CSS 3, JS
Database
MySQL 8.0
Browser
Google Chrome,
Firefox, Microsoft
edge
Server
Tomcat 9.0
Framework
Angular 11.2.0
Editor
VS code, Eclipse
(march 2021)
Hardware requirements
Name of component
Specification
Processor
Intel i5 8th gen
RAM
8GB or more
ROM
Minimum 256GB
10
5. FEASIBILITY STUDY
After doing the project ##PojectName##, study and analyzing all the existing or
required functionalities of the system, the next task is to do the feasibility study for the
project. All projects are feasible - given unlimited resources and infinite time. The
feasibility study includes consideration of all the possible ways to provide a solution to
the given problem. The proposed solution should satisfy all the user requirements and
should be flexible enough so that future changes can be easily done based on the future
upcoming requirements.
A. Economical Feasibility:
This is a very important aspect to be considered while developing a
project. We decided on the technology based on the minimum possible
cost factor. All hardware and software cost has to be borne by the
organization. Overall we have estimated that the benefits the organization
is going to receive from the proposed system will surely overcome the
initial costs and the later-on running costs for system.
B. Technical Feasibility:
This included the study of function, performance and constraints that may
affect the ability to achieve an acceptable system. For this feasibility study,
we studied complete functionality to be provided in the system, as
described in the System Requirement Specification (SRS), and checked if
everything was possible using different type of frontend and backend
platforms.
C. Operational Feasibility:
No doubt the proposed system is fully GUI based that is very user friendly
and all inputs to be taken all self-explanatory even to a layman. Besides,
a proper training has been conducted to let know the essence of the system
to the users so that they feel comfortable with new system. As far our
study is concerned the clients are comfortable and happy as the system has
cut down their loads and doing.
11
6. SYSTEM DESIGN
6. a. DATA MODEL
FIELD NAME
DATA TYPE
CONSTRAINTS
DESCRIPTION
desgid
String
Primary key
Gives virtual id of
a designation
desgname
String
Not Null
Store Name of a
designation
This table will contain the details information of the designation system of the
company
1. Student Details
FIELD NAME
DATA TYPE
CONSTRAINTS
DESCRIPTION
First Name
String
Not Null
Stores student’s first
Name
Last Name
String
Not Null
Stores student’s Last
Name
Father’s Name
String
Not Null
Stores Father’s Name
Mother’s Name
String
Not Null
Stores mother’s Name
Regd. Number
String
Not Null
Stores student’s Regd.
Number
Roll Number
String
Not Null
Stores student’s Roll
Number
Mobile Number
String
Not Null
Stores Mobile Number
Email
String
Not Null
Stores student’s Email
Address
String
Not Null
Stores student’s Address
Department
String
Not Null
Stores student’s
Department
12
Gender
String
Not Null
Password
String
Not Null
Stores student’s Gender
Stores password
This table will contains all the student details of each student.
2. Placed Students
FIELD NAME
DATA TYPE
CONSTRAINTS
DESCRIPTION
Student Name
String
Not Null
Stores student’s Name
Regd. Number
String
Not Null
Stores Regd. Number
Department
String
Not Null
Stores student’s
Department
Company Id
String
Not Null
Stores Company Id
Company Name
String
Not Null
Stores Company Name
Academic Year
String
Not Null
Stores Academic Year
This table will contains all the placed student’s details.
3. Incoming Company
FIELD NAME
DATA TYPE
CONSTRAINTS
DESCRIPTION
Company Id
String
Not Null
Stores Company Id
Company Name
String
Not Null
Stores Company Name
Company Address
String
Not Null
Stores Company
Address
Job Location
String
Not Null
Stores Job Location
Ctc
String
Not Null
Stores Ctc
13
Requirement
String
Not Null
Stores Requirement
Date
String
Not Null
Stores Date
Department
String
Not Null
Stores Department
This table will contains details about incoming company.
4. Applied Company
FIELD NAME
Serial Number
DATA TYPE
CONSTRAINTS
String
Not Null
DESCRIPTION
Stores Serial number
Name
String
Not Null
Stores Name
Email
String
Not Null
Stores Email
Company Name
String
Not Null
Stores Company Name
Company Id
String
Not Null
Stores Company Id
Department
String
Not Null
Stores Department
Regd. Number
String
Not Null
Stores Regd. Number
This table will contain all the student’s details who had applied for any college.
ER Diagram
14
15
16
Frontend
MODELS
Appliedcompany.specs.cs
import { Appliedcompany } from './appliedcompany';
describe('Appliedcompany', () => {
it('should create an instance', () => {
expect(new
Appliedcompany()).toBeTruthy(); });
});
Appliedcompany.ts
export class Appliedcompany {
public slno: String="";
public name :String="";
public email :String="";
public company_name :String="";
public company_id :String="";
public department :String="";
public registration_number :String="";
}
Incomingcompany.specs.cs
import { Incomingcompany } from './incomingcompany';
describe('Incomingcompany', () => {
it('should create an instance', () => {
expect(new
Incomingcompany()).toBeTruthy(); });
});
Incomingcompany.ts
export class Incomingcompany {
public company_id :String="";
public company_name :String="";
public company_address :String="";
public Job_loaction :String="";
public ctc :String="";
public requirement :String="";
public date :String="";
}
17
Placedstudents.specs.cs
import { Placedstudents } from './placedstudents';
describe('Placedstudent', () => {
it('should create an instance', () => {
expect(new Placedstudents()).toBeTruthy();
});
});
Placedstudents.ts
export class Placedstudents {
public student_name:String="";
public registration_number:String="";
public department:String="";
public company_id:String="";
public company_name:String="";
public academic_year:String="";
}
Studentdetails.specs.cs
import { Studentdetails } from './studentdetails';
describe('Studentdetails', () => {
it('should create an instance', () => {
expect(new Studentdetails()).toBeTruthy();
});
});
Studentdetails.ts
export class Studentdetails {
public first_name :String="";
public last_name :String="";
public father_name :String="";
public mother_name :String="";
public registration_number
:String=""; public roll_number
:String="";
public email :String="";
public address :String="";
public department :String="";
public gender :String="";
public password :String="";
}
18
Services
StudentserviceService.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { StudentserviceService } from './studentservice.service';
describe('StudentserviceService', () => {
let service: StudentserviceService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(StudentserviceService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
StudentserviceService.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Placedstudents } from '../_models/placedstudents';
import { Studentdetails } from '../_models/studentdetails';
import { Incomingcompany } from
'../_models/incomingcompany'; import { Appliedcompany } from
'../_models/appliedcompany';
@Injectable({
providedIn: 'root'
})
export class StudentserviceService {
stdobj :Studentdetails
constructor(public http:HttpClient) { }
AddStudentRecord(stdobj:any){
return
this.http.post('http://localhost:8082/AddStudentRecord',stdobj); }
StudentLogin(stdobj:any){
return this.http.post('http://localhost:8082/StudentLoginCheck',stdobj);
19
}
viewplacedstudent(dataobj:any){
return
this.http.post('http://localhost:8082/viewplacedstudent',dataobj); }
AddAppliedCompanyRecord(dataobj:any){
return
this.http.post('http://localhost:8082/AddAppliedCompanyRecord',dataobj)
; }
applycompany(){}
}
TposerviceService.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { TposerviceService } from './tposervice.service';
describe('TposerviceService', () => {
let service: TposerviceService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(TposerviceService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
TposerviceService.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
// Used models
import { Placedstudents } from '../_models/placedstudents';
import { Studentdetails } from '../_models/studentdetails';
import { Incomingcompany } from '../_models/incomingcompany';
20
import { Appliedcompany } from '../_models/appliedcompany';
@Injectable({
providedIn: 'root',
})
export class TposerviceService {
constructor(public http: HttpClient) {}
viewAllRecords(){
return
this.http.get('http://localhost:8082/ViewAllRecords'); }
viewSearchedRecords(stdobj:any){
return
this.http.post('http://localhost:8082/viewSearchedRecords',stdobj); }
AddIncomingCompany(incobj:any){
return
this.http.post('http://localhost:8082/AddIncomingCompany',incobj); }
AddPlacedStudent(dataobj:any){
return
this.http.post('http://localhost:8082/AddPlacedStudent',dataobj); }
viewAppliedStudent(dataobj:any) {
return
this.http.post('http://localhost:8082/viewAppliedStudent',dataobj); }
viewAppliedStudentAllRecord(){
return
this.http.get('http://localhost:8082/viewAppliedStudentAllRecord'); }
deletecomapny(){}
}
COMPONENTS
addincomingcompany.component.html
<app-tponav></app-tponav>
<body>
<div class="container">
21
<div class="title">Add Incoming Company</div>
<div class="backend_message">
<h3>{{Showmsg}}</h3>
</div>
<div class="content">
<form #userform="ngForm" (ngSubmit)="onSubmit(userform)">
<div class="user-details">
<div class="input-box">
<span class="details">Company ID</span>
<input type="number" name="company_id" placeholder="Company
ID" [(ngModel)]="incobj.company_id"
required>
</div>
<div class="input-box">
<span class="details">Company Name</span>
<input type="text" name="company_name" placeholder="Company
Name"
[(ngModel)]="incobj.company_name" required>
</div>
<div class="input-box">
<span class="details">Company Address</span>
<input type="text" name="company_address"
placeholder="Company Address"
[(ngModel)]="incobj.company_address" required>
</div>
<div class="input-box">
<span class="details">Job Location</span>
<input type="text" name="Job_loaction"
placeholder="Location" [(ngModel)]="incobj.Job_loaction"
required>
</div>
<div class="input-box">
<span class="details">CTC</span>
<input type="number" name="ctc" placeholder="CTC"
[(ngModel)]="incobj.ctc" required>
</div>
<div class="input-box">
<span class="details">Requirement</span>
<input type="text" name="requirement"
placeholder="Requirement" [(ngModel)]="incobj.requirement"
required>
</div>
<div class="input-box">
22
<span class="details">Date</span>
<input type="date" name="date" placeholder="Date"
[(ngModel)]="incobj.date" required>
</div>
</div>
<div class="department-details">
<input type="checkbox" id="department-1" name="department"
value="CSE">
<input type="checkbox" id="department-2" name="department"
value="IT">
<input type="checkbox" id="department-3" name="department"
value="ME">
<input type="checkbox" id="department-4" name="department"
value="CE">
<input type="checkbox" id="department-5" name="department"
value="EE">
<input type="checkbox" id="department-6" name="department"
value="EEE">
<input type="checkbox" id="department-7" name="department"
value="ET">
<span class="department-title">Department</span>
<div class="category">
<label for="department-1">
<span class="square one"></span>
<span class="department">CSE</span>
</label>
<label for="department-2">
<span class="square two"></span>
<span class="department">IT</span>
</label>
<label for="department-3">
<span class="square three"></span>
<span class="department">ME</span>
</label>
<label for="department-4">
<span class="square four"></span>
<span class="department">CE</span>
</label>
<label for="department-5">
<span class="square five"></span>
<span class="department">EE</span>
</label>
<label for="department-6">
<span class="square six"></span>
23
<span class="department">EEE</span>
</label>
<label for="department-7">
<span class="square seven"></span>
<span class="department">ET</span>
</label>
</div>
</div>
<div class="button">
<input type="submit" id="button" value="ADD">
</div>
</form>
</div>
</div>
<script>
const button= document.querySelector('#button');
button.addEventListener('click', (event) => {
let checkboxes=
document.querySelectorAll('input[name="department"]:checked');
let output= "";
checkboxes.forEach((checkbox) => {
output+=(checkbox.value)+",";
});
console.log("You have selected ", output);
});
</script>
</body>
addincomingcompany.component.css
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;7
0 0&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100%;
display: flex;
justify-content: center;
24
companyapply.component.css
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;7
0 0&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
background: transparent;
margin-top: 20px;
}
.backend_message {
color: #71b7e6;
}
.container {
max-width: 700px;
width: 100%;
padding: 25px 30px;
margin: 10px 10px;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border-radius: 12px;
border: 1px solid rgba(209, 213, 219, 0.3);
}
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
25
.container .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
.content form .user-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box {
margin-bottom: 15px;
width: calc(100% / 2 - 20px);
}
form .input-box span.details {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input,
.user-details .input-box select {
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid {
26
border-color: #9b59b6;
}
form .gender-details .gender-title
{ font-size: 20px;
font-weight: 500;
}
form .category {
display: flex;
width: 80%;
margin: 14px 0;
justify-content: spacebetween; }
form .category label {
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot {
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid
transparent; transition: all
0.3s ease;
}
#dot-1:checked~.category label .one,
#dot-2:checked~.category label .two,
#dot-3:checked~.category label .three
{ background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"] {
display: none;
}
form .button {
height: 45px;
margin: 35px 0
27
}
form .button input {
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
form .button input:hover {
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6,
#9b59b6); }
@media(max-width: 584px) {
.container {
max-width: 100%;
}
form .user-details .input-box {
margin-bottom: 15px;
width: 100%;
}
form .category {
width: 100%;
}
.content form .user-details {
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar {
width: 5px;
}
}
28
@media(max-width: 459px) {
.container .content .category {
flex-direction: column;
}
}
companyapply.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Appliedcompany } from '../_models/appliedcompany';
import { StudentserviceService } from '../_services/studentservice.service';
@Component({
selector: 'app-companyapply',
templateUrl: './companyapply.component.html',
styleUrls: ['./companyapply.component.css']
})
export class CompanyapplyComponent implements OnInit {
public Showmsg: string="";
constructor(
public dataobj: Appliedcompany,
public serviceobj: StudentserviceService
) { }
onSubmit(form: NgForm) {
console.log('INSIDE ONSUBMIT METHOD');
console.log(this.dataobj.name);
console.log(this.dataobj.email);
console.log(this.dataobj.company_id);
console.log(this.dataobj.company_name);
this.serviceobj.AddAppliedCompanyRecord(this.dataobj).subscribe((response:
any) => {
console.log('GOT REPLY FROM SPRINGBOOT');
console.log(response);
this.Showmsg = 'COMPANY APPLIED SUCCESSFULLY';
this.resetRegForm(form);
});
}
resetRegForm(form: NgForm) {
29
form.resetForm();
}
ngOnInit(): void {
}
}
nav.component.html
<div class="navbar">
<input id="nav-toggle" type="checkbox">
<ul class="nav-menu">
<li><a href="/home">HOME</a></li>
<li><a href="/registration">REGISTER</a></li>
<li><a href="/studentlogin">STUDENTLOGIN</a></li> <li><a href="/tpologin">TPOLOGIN</a></li> <li><a
href="/contact">CONTACT</a></li>
<li><a href="/about">ABOUT</a></li>
</ul>
<label for="nav-toggle" class="iconburger"> <div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</div>
nav.component.css
*{
text-decoration: none;
list-style: none;
}
.navbar {
height: 50px;
width: 100%;
background-color: transparent;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
}
.navbar .nav-menu {
width:100%;
height: 50px;
margin-left: 20%;
margin-right: 20%;
30
display: inherit;
justify-content: center;
align-items: center;
border-radius: 25px;
background-color: rgba(255, 255, 255,
0.438); }
.navbar .nav-menu a{
display: flex;
justify-content: center;
align-items: center;
width:max-content;
height:30px;
margin: 5px 15px 5px 15px;
padding: 0 10px 0 10px;
border-color: transparent;
border-radius: 20px;
color: #1b1919;
font-weight: bold;
}
.navbar .nav-menu a:hover{
background-color: hsla(0, 0%, 100%,
0.571); }
#nav-toggle {
display: none;
position: absolute;
top: -100px;
}
.navbar .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
.navbar .icon-burger .line {
width: 30px;
height: 5px;
background-color: rgba(255, 255, 255, 0.438);
margin: 5px;
31
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px)
{ .navbar {
background-color: transparent;
}
.navbar .nav-menu {
float: none;
position: fixed;
z-index: 13;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
background-color: rgba(16, 16, 16,
0.888); overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
border-radius: 25px;
margin: 8px 10px;
}
.navbar .nav-menu a {
font-size: 15px;
width: max-content;
padding: 1px 10px;
color: #fff;
}
.navbar .nav-menu a:hover {
background-color: hsla(0, 0%, 100%,
0.721); transition: 0.4s ease-out;
color: #1b1919;
}
32
.navbar :checked~.nav-menu {
bottom: 0;
}
.navbar .icon-burger {
display: block;
}
.navbar :checked~.icon-burger .line:nth-child(1)
{ transform: translateY(10px) rotate(225deg); }
.navbar :checked~.icon-burger .line:nth-child(3)
{ transform: translateY(-10px) rotate(-225deg); }
.navbar :checked~.icon-burger .line:nth-child(2)
{ opacity: 0;
}
}
nav.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit
{ constructor() { }
ngOnInit(): void {
}
}
registration.component.html
<app-nav></app-nav>
<body>
<div class="container">
<div class="title">Registration</div>
<div class="backend_message">
33
<h3>{{Showmsg}}</h3>
</div>
<div class="content">
<form #userform="ngForm" (ngSubmit)="onSubmit(userform)">
<div class="user-details">
<div class="input-box">
<span class="details">First Name</span>
<input type="text" name="first_name" placeholder="Enter
your first name"
[(ngModel)]="stdobj.first_name" required>
</div>
<div class="input-box">
<span class="details">Last name</span>
<input type="text" name="last_name" placeholder="Enter
your last name"
[(ngModel)]="stdobj.last_name" required>
</div>
<div class="input-box">
<span class="details">Father's Name</span>
<input type="text" name="father_name" placeholder="Enter
your father's name"
[(ngModel)]="stdobj.father_name" required>
</div>
<div class="input-box">
<span class="details">Mother's Name</span>
<input type="text" name="mother_name" placeholder="Enter
your mother's name"
[(ngModel)]="stdobj.mother_name" required>
</div>
<div class="input-box">
<span class="details">Registration Number</span>
<input type="number" name="registration_number"
placeholder="Enter your registration Number"
[(ngModel)]="stdobj.registration_number" required>
</div>
<div class="input-box">
<span class="details">Roll Number</span>
<input type="text" name="roll_number" placeholder="Enter
your roll Number"
[(ngModel)]="stdobj.roll_number" required>
</div>
<div class="input-box">
<span class="details">Department</span>
<select name="department" [(ngModel)]="stdobj.department">
34
<option value="" disabled selected>Please select your
department</option>
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ME">ME</option>
<option value="CE">CE</option>
<option value="EE">EE</option>
<option value="EEE">EEE</option>
<option value="ET">ET</option>
</select>
</div>
<div class="input-box">
<span class="details">Email</span>
<input type="email" name="email" placeholder="Enter your
email" [(ngModel)]="stdobj.email"
required>
</div>
<div class="input-box">
<span class="details">Address</span>
<input type="text" name="address" placeholder="Enter your
address" [(ngModel)]="stdobj.address"
required>
</div>
<div class="input-box">
<span class="details">Mobile Number</span>
<input type="tel" name="mobile_number" placeholder="Enter
your mobile number"
[(ngModel)]="stdobj.mobile_number" required>
</div>
<div class="input-box">
<span class="details">Password</span>
<input type="password" name="password" placeholder="Enter
your password"
[(ngModel)]="stdobj.password" required>
</div>
<div class="input-box">
<span class="details">Confirm Password</span>
<input type="password" name="Confirmed_Password"
placeholder="Re-enter your password" required>
</div>
</div>
<div class="gender-details">
<input type="radio" name="gender" id="dot-1"
[(ngModel)]="stdobj.gender" value="Male">
35
<input type="radio" name="gender" id="dot-2"
[(ngModel)]="stdobj.gender" value="Female">
<input type="radio" name="gender" id="dot-3"
[(ngModel)]="stdobj.gender" value="Prefer not to say">
<span class="gender-title">Gender</span>
<div class="category">
<label for="dot-1">
<span class="dot one"></span>
<span class="gender">Male</span>
</label>
<label for="dot-2">
<span class="dot two"></span>
<span class="gender">Female</span>
</label>
<label for="dot-3">
<span class="dot three"></span>
<span class="gender">Prefer not to say</span>
</label>
</div>
</div>
<div class="button">
<input type="submit" value="Register">
</div>
</form>
</div>
</div>
</body>
registration.component.css
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;7
0 0&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100%;
display: flex;
justify-content: center;
36
align-items: center;
padding: 10px;
background: transparent;
margin-top: 20px;
}
.backend_message {
color: #71b7e6;
}
.container {
max-width: 700px;
width: 100%;
padding: 25px 30px;
margin: 10px 10px;
backdrop-filter: blur(16px) saturate(180%); webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border-radius: 12px;
border: 1px solid rgba(209, 213, 219,
0.3); }
.container .title {
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
.content form .user-details {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
37
}
form .user-details .input-box
{ margin-bottom: 15px;
width: calc(100% / 2 20px); }
form .input-box span.details
{ display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input,
.user-details .input-box select
{ height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid
{ border-color: #9b59b6;
}
form .gender-details .gender-title
{ font-size: 20px;
font-weight: 500;
}
form .category {
display: flex;
width: 80%;
margin: 14px 0;
justify-content: spacebetween; }
form .category label {
display: flex;
38
align-items: center;
cursor: pointer;
}
form .category label .dot {
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked~.category label .one,
#dot-2:checked~.category label .two,
#dot-3:checked~.category label .three {
background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"] {
display: none;
}
form .button {
height: 45px;
margin: 35px 0
}
form .button input {
height: 100%;
width: 100%;
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
form .button input:hover {
39
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6, #9b59b6);
}
@media(max-width: 584px) {
.container {
max-width: 100%;
}
form .user-details .input-box {
margin-bottom: 15px;
width: 100%;
}
form .category {
width: 100%;
}
.content form .user-details {
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar {
width: 5px;
}
}
@media(max-width: 459px) {
.container .content .category {
flex-direction: column;
}
}
registration.component.ts
import { Component, OnInit } from '@angular/core';
import { Studentdetails } from
'../_models/studentdetails'; import { NgForm } from
'@angular/forms';
import { StudentserviceService } from '../_services/studentservice.service';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css'],
})
40
export class RegistrationComponent implements OnInit {
public Showmsg: string="";
constructor(
public stdobj: Studentdetails,
public serviceobj: StudentserviceService
) {}
onSubmit(form: NgForm) {
console.log('INSIDE ONSUBMIT METHOD');
console.log(this.stdobj.first_name);
console.log(this.stdobj.last_name);
console.log(this.stdobj.father_name);
console.log(this.stdobj.mother_name);
console.log(this.stdobj.registration_number);
console.log(this.stdobj.roll_number);
console.log(this.stdobj.mobile_number);
console.log(this.stdobj.email);
console.log(this.stdobj.address);
console.log(this.stdobj.department);
this.serviceobj.AddStudentRecord(this.stdobj).subscribe((response: any) =>
{ console.log('GOT REPLY FROM SPRINGBOOT');
console.log(response);
this.Showmsg = 'REGISTRATION SUCCESSFUL';
this.resetRegForm(form);
});
}
resetRegForm(form: NgForm) {
form.resetForm();
}
ngOnInit(): void {}
}
searchstudent.component.html
<app-tponav></app-tponav>
<body>
<div class="container">
<div class="title">SEARCH STUDENT</div>
<div class="backend_message">
<h3>{{showmsg}}</h3>
</div>
41
<div class="content">
<form #userform="ngForm" (ngSubmit)="onSubmit(userform)">
<br>
<div class="user-details">
<div class="input-box">
<span class="details">Email</span>
<input type="email" name="email" placeholder="Enter email
of the student"
[(ngModel)]="stdobj.email" required>
</div>
</div>
<div class="button">
<input type="submit" value="SEARCH">
</div>
</form>
<!-- table -->
</div>
<div class="table" *ngIf="showtable">
<table border="1" id="student-details">
<thead>
<tr>
<th>FIRST NAME</th>
<th>LAST NAME</th>
<th>FATHER'S NAME</th>
<th>MOTHER'S NAME</th>
<th>GENDER</th>
<th>EMAIL</th>
<th>ADDRESS</th>
<th>PHONE NO.</th>
<th>REGD. NO.</th>
<th>ROLL NO.</th>
<th>DEPARTMENT</th>
<th>PASSWORD</th>
</tr>
</thead>
<tr *ngFor="let stdobj of studentrecordsarr">
<td>{{stdobj.first_name}}</td>
<td>{{stdobj.last_name}}</td>
<td>{{stdobj.father_name}}</td>
<td>{{stdobj.mother_name}}</td>
<td>{{stdobj.gender}}</td>
<td>{{stdobj.email}}</td>
<td>{{stdobj.address}}</td>
42
<td>{{stdobj.mobile_number}}</td>
<td>{{stdobj.registration_number}}</td>
<td>{{stdobj.roll_number}}</td>
<td>{{stdobj.department}}</td>
<td>{{stdobj.password}}</td>
</tr>
</table>
</div>
</div>
</body>
searchstudent.component.css
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;7
0 0&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: transparent;
margin-top: -30px;
}
.container {
width: 95%;
margin: 10px 10px 10px 10px;
padding: 25px 20px;
margin: 10px 10px;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border-radius: 12px;
border: 1px solid rgba(209, 213, 219, 0.3);
}
.container .title{
43
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
.content form .user-details{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box{
margin-bottom: 15px;
width: calc(100% / 1 - .1px);
}
form .input-box span.details{
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input{
height: 45px;
width: 30%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
}
.user-details .input-box input:focus,
.user-details .input-box input:valid{
border-color: #9b59b6;
}
44
form .gender-details .gender-
title{ font-size: 20px;
font-weight: 500;
}
form .category{
display: flex;
width: 80%;
margin: 14px 0 ;
justify-content: spacebetween; }
form .category label{
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot{
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label
.three{ background: #9b59b6;
border-color: #d9d9d9;
}
form .button{
height: 45px;
margin: 15px 0;
width: 100px;
}
form .button input{
height: 100%;
width: calc(100% / 1 - 3px);
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
45
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
form .button input:hover{
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6,
#9b59b6); }
@media(max-width: 584px){
.container{
max-width: 100%;
}
form .user-details .input-box{
margin-bottom: 15px;
width: 100%;
}
form .category{
width: 100%;
}
.content form .user-details{
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar{
width: 5px;
}
}
@media(max-width: 459px){
.container .content .category{
flex-direction: column;
}
}
/* table styles */
#student-details {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#student-details td, #student-details th {
border: 1px solid #ddd;
46
padding: 2px;
}
#student-details tr:nth-child(even){background-color:
#f2f2f2;} #student-details tr:hover {background-color: #ddd;}
#student-details th {
text-align: left;
background-color: #04AA6D;
color: white;
}
searchstudent.component.ts
import
import
import
import
{ Component, OnInit } from '@angular/core';
{ NgForm } from '@angular/forms';
{Studentdetails}from '../_models/studentdetails'
{TposerviceService} from '../_services/tposervice.service'
@Component({
selector: 'app-searchstudent',
templateUrl: './searchstudent.component.html',
styleUrls: ['./searchstudent.component.css']
})
export class SearchstudentComponent implements OnInit {
showmsg:string=""
showtable=false
studentrecordsarr: Studentdetails[];
constructor(public stdobj:Studentdetails ,public serviceobj:TposerviceService)
{ }
onSubmit(form: NgForm) {
console.log('INSIDE ONSUBMIT METHOD');
console.log(this.stdobj.first_name);
console.log(this.stdobj.last_name);
console.log(this.stdobj.father_name);
console.log(this.stdobj.mother_name);
console.log(this.stdobj.registration_number);
console.log(this.stdobj.roll_number);
console.log(this.stdobj.mobile_number);
console.log(this.stdobj.email);
47
console.log(this.stdobj.address);
console.log(this.stdobj.department);
this.serviceobj.viewSearchedRecords(this.stdobj)
.subscribe((response: any) => {
console.log("GOT REPLY FROM SPRINGBOOT");
console.log(response)
this.studentrecordsarr = response
if (response != null) {
this.showmsg = "Record Found";
this.studentrecordsarr = response
this.showtable = true
}
else {
this.showmsg = "INVALID EMAIL ID"
this.showtable = false
}
});
}
//CLEAR FROM
resetRegForm(form: NgForm) {
form.resetForm();
}
ngOnInit(): void {}
}
studentafterlogin.component.html
<body>
<app-studentnav></app-studentnav>
<h3 align="right">WELCOME {{first_name}} &nbsp; {{last_name}}</h3>
</body>
studentafterlogin.component.css
48
body{
height: 100vh;
background:transparent;
}
studentafterlogin.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-studentafterlogin',
templateUrl: './studentafterlogin.component.html',
styleUrls: ['./studentafterlogin.component.css']
})
export class StudentafterloginComponent implements OnInit {
first_name: string=""
last_name: string=""
constructor(
) {
this.first_name=sessionStorage.getItem("LoginstudentFirstname")
, this.last_name=sessionStorage.getItem("LoginstudentLastname")
}
ngOnInit(): void {
}
}
studentlogin.component.html
<app-nav></app-nav>
<body>
<div class="container">
<div class="title">Login</div>
<div class="content">
<form #userform="ngForm" (ngSubmit)="onSubmit(userform)">
<div class="user-details">
<div class="input-box">
<span class="details">Email</span>
<input type="email" name="email" placeholder="Enter your
email" [(ngModel)]="stdobj.email"
required>
</div>
49
<div class="input-box">
<span class="details">Password</span>
<input type="password" name="password" placeholder="Enter
your password"
[(ngModel)]="stdobj.password" required>
</div>
</div>
<div class="button">
<input type="submit" value="Login">
</div>
<div class="backend_message">
<h3>{{Showmsg}}</h3>
</div>
</form>
</div>
</div>
</body>
studentlogin.component.css
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;7
0 0&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
margin-top: -30px;
}
.container {
max-width: 500px;
width: 100%;
padding: 25px 30px;
margin: 10px 10px;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
50
background-color: rgba(255, 255, 255,
0.75); border-radius: 12px;
border: 1px solid rgba(209, 213, 219,
0.3); }
.container .title{
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
.content form .user-details{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0 12px 0;
}
form .user-details .input-box{
margin-bottom: 15px;
width: calc(100% / 1 - 3px);
}
form .input-box span.details{
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-box input{
height: 45px;
width: 100%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 15px;
border: 1px solid #ccc;
border-bottom-width: 2px;
transition: all 0.3s ease;
51
}
.user-details .input-box
input:focus, .user-details .inputbox input:valid{ border-color:
#9b59b6;
}
form .gender-details .gendertitle{ font-size: 20px;
font-weight: 500;
}
form .category{
display: flex;
width: 80%;
margin: 14px 0 ;
justify-content: spacebetween; }
form .category label{
display: flex;
align-items: center;
cursor: pointer;
}
form .category label .dot{
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 10px;
background: #d9d9d9;
border: 5px solid transparent;
transition: all 0.3s ease;
}
#dot-1:checked ~ .category label .one,
#dot-2:checked ~ .category label .two,
#dot-3:checked ~ .category label
.three{ background: #9b59b6;
border-color: #d9d9d9;
}
form input[type="radio"]{
display: none;
}
form .button{
height: 45px;
margin: 35px 0
}
form .button input{
height: 100%;
width: calc(100% / 1 - 3px);
52
border-radius: 5px;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
background: linear-gradient(135deg, #71b7e6,
#9b59b6); }
form .button input:hover{
/* transform: scale(0.99); */
background: linear-gradient(-135deg, #71b7e6,
#9b59b6); }
@media(max-width: 584px){
.container{
max-width: 100%;
}
form .user-details .input-box{
margin-bottom: 15px;
width: 100%;
}
form .category{
width: 100%;
}
.content form .user-details{
max-height: 300px;
overflow-y: scroll;
}
.user-details::-webkit-scrollbar{
width: 5px;
}
}
@media(max-width: 459px){
.container .content .category{
flex-direction: column;
}
}
studentlogin.component.ts
import { Component, OnInit } from
'@angular/core'; import { Router } from
'@angular/router';
import {Studentdetails} from '../_models/studentdetails';
53
import { NgForm } from '@angular/forms';
import { StudentserviceService } from
'../_services/studentservice.service'; import { Session } from
'protractor';
@Component({
selector: 'app-studentlogin',
templateUrl: './studentlogin.component.html',
styleUrls: ['./studentlogin.component.css']
})
export class StudentloginComponent implements OnInit {
public Showmsg: string="";
constructor(public stdobj:Studentdetails,
public serviceobj: StudentserviceService,
public router: Router) { }
onSubmit(form: NgForm) {
console.log("entered mail is ------"+this.stdobj.email);
this.serviceobj.StudentLogin(this.stdobj)
.subscribe((response: any) => {
console.log("GOT REPLY FROM SPRINGBOOT");
console.log(response)
if(response!=null){
sessionStorage.setItem("LoginstudentFirstname",response.first_name
)
sessionStorage.setItem("LoginstudentLastname",response.last_name)
this.router.navigate(['/studentafterlogin']);
}
else{
this.Showmsg="Invalid Email or Password"
}
});
}
resetRegForm(form: NgForm) {
form.resetForm();
}
ngOnInit(): void {
}
54
}
studentnav.component.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<input id="nav-toggle" type="checkbox">
<ul class="nav-menu">
<li><a href="/viewincomingcompanybydept">VIEW INCOMING
COMPANY</a></li> <li><a href="/companyapply">APPLY COMPANY</a></li>
<li><a href="/viewplacedstudent">PLACED STUDENT</a></li>
<li><a href="/home" title="logout" ><i class="fa fa-sign-out" style="font
size:26px" aria-hidden="true"></i></a></li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</div>
studentnav.component.css
*{
text-decoration: none;
list-style: none;
}
.navbar {
height: 50px;
width: 100%;
background-color: transparent;
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5px;
}
.navbar .nav-menu {
width:100%;
height: 50px;
margin-left: 20%;
55
margin-right: 20%;
display: inherit;
justify-content: center;
align-items: center;
border-radius: 25px;
background-color: rgba(255, 255, 255,
0.438); }
.navbar .nav-menu a{
display: flex;
justify-content: center;
align-items: center;
width:max-content;
height:30px;
margin: 5px 15px 5px 15px;
padding: 0 10px 0 10px;
border-color: transparent;
border-radius: 20px;
color: #1b1919;
font-weight: bold;
}
.navbar .nav-menu a:hover{
background-color: hsla(0, 0%, 100%,
0.571); }
#nav-toggle {
display: none;
position: absolute;
top: -100px;
}
.navbar .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
.navbar .icon-burger .line {
width: 30px;
height: 5px;
background-color: rgba(255, 255, 255, 0.438);
56
margin: 5px;
border-radius: 3px;
transition: all .3s ease-in-out;
}
@media screen and (max-width: 768px)
{ .navbar {
background-color: transparent;
}
.navbar .nav-menu {
float: none;
position: fixed;
z-index: 13;
left: 0;
right: 0;
top: 100px;
bottom: 100%;
width: auto;
height: auto;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
background-color: rgba(16, 16, 16,
0.888); overflow: hidden;
box-sizing: border-box;
transition: all .5s ease-in-out;
border-radius: 25px;
margin: 8px 10px;
}
.navbar .nav-menu a {
font-size: 15px;
width: max-content;
padding: 1px 10px;
color: #fff;
}
.navbar .nav-menu a:hover {
background-color: hsla(0, 0%, 100%,
0.721); transition: 0.4s ease-out;
color: #1b1919;
}
57
.navbar :checked~.nav-menu {
bottom: 0;
}
.navbar .icon-burger {
display: block;
}
.navbar :checked~.icon-burger .line:nth-child(1)
{ transform: translateY(10px) rotate(225deg); }
.navbar :checked~.icon-burger .line:nth-child(3)
{ transform: translateY(-10px) rotate(-225deg); }
.navbar :checked~.icon-burger .line:nth-child(2)
{ opacity: 0;
}
}
studentnav.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-studentnav',
templateUrl:
'./studentnav.component.html', styleUrls:
['./studentnav.component.css'] })
export class StudentnavComponent implements OnInit
{ constructor() { }
ngOnInit(): void {
}
}
viewallstudentrecords.component.htm
l <body>
<app-tponav></app-tponav>
<div class="container">
58
<div class="title">ALL USER DETAILS</div>
<div class="content">
<div class="table">
<table border="1" id="student-details">
<thead>
<tr>
<th>FIRST NAME</th>
<th>LAST NAME</th>
<th>FATHER'S NAME</th>
<th>MOTHER'S NAME</th>
<th>GENDER</th>
<th>EMAIL</th>
<th>ADDRESS</th>
<th>PHONE NO.</th>
<th>REGD. NO.</th>
<th>ROLL NO.</th>
<th>DEPARTMENT</th>
<th>PASSWORD</th>
</tr>
</thead>
<tr *ngFor="let stdobj of studentrecordsarr">
<td>{{stdobj.first_name}}</td>
<td>{{stdobj.last_name}}</td>
<td>{{stdobj.father_name}}</td>
<td>{{stdobj.mother_name}}</td>
<td>{{stdobj.gender}}</td>
<td>{{stdobj.email}}</td>
<td>{{stdobj.address}}</td>
<td>{{stdobj.mobile_number}}</td>
<td>{{stdobj.registration_number}}</td>
<td>{{stdobj.roll_number}}</td>
<td>{{stdobj.department}}</td>
<td>{{stdobj.password}}</td>
</tr>
</table>
</div>
</div>
</div>
</body>
viewallstudentrecords.component.css
59
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&displ
a y=swap');
body{
height: 100vh;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 95%;
margin: 10px 10px 10px 10px;
padding: 25px 20px;
margin: 10px 10px;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background-color: rgba(255, 255, 255, 0.75);
border-radius: 12px;
border: 1px solid rgba(209, 213, 219, 0.3);
}
.container .title{
font-size: 25px;
font-weight: 500;
position: relative;
}
.container .title::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 30px;
border-radius: 5px;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
}
/* table design */
.table{
margin-top: 10px;
}
#student-details {
60
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#student-details td, #student-details th {
border: 1px solid #ddd;
padding: 2px;
}
#student-details tr:nth-child(even){background-color:
#f2f2f2;} #student-details tr:hover {background-color: #ddd;}
BACKEND CODE
Student Controller
package com.controllers;
import java.util.ArrayList;
import
org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
//imported models and services
import com.models.Appliedcompany;
import com.models.Placedstudents;
import com.models.Studentdetails;
import com.services.StudentService;
61
@RestController
@CrossOrigin(origins = "http://localhost:4200")
public class StudentController {
@Autowired
private StudentService studentserviceobj;
@PostMapping("/AddStudentRecord")// name should be same as url in backend post method
public Studentdetails AddStudentRecord(@RequestBody Studentdetails stdobj){
Studentdetails objectrecivedfromservice=studentserviceobj.addNewRecord(stdobj);
return objectrecivedfromservice;
}
@PostMapping("/StudentLoginCheck")// name should be same as url in backend post method
public Studentdetails StudentLoginCheck(@RequestBody Studentdetails stdobj){
return studentserviceobj.checkLogin(stdobj.getEmail(),
stdobj.getPassword()); }
@PostMapping("/viewplacedstudent")// name should be same as url in backend post method
public ArrayList<Placedstudents> viewplacedstudent(@RequestBody Placedstudents dataobj){
ArrayList<Placedstudents>
objectrecivedfromservice=studentserviceobj.findByDepartment(dataobj);
return objectrecivedfromservice;
62
}
@PostMapping("/AddAppliedCompanyRecord")// name should be same as url in backend post
method
public Appliedcompany AddAppliedCompanyRecord(@RequestBody Appliedcompany
dataobj){
Appliedcompany
objectrecivedfromservice=studentserviceobj.AddAppliedCompanyRecord(dataobj)
;
return objectrecivedfromservice;
}
tpo Controller
12
Applied company
package com.models;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
@Entity
public class Appliedcompany {
private Long slno;
private String name ;
private String email ;
private String company_name ;
private String company_id ;
private String department ;
private String registration_number ;
63
@Id
@GeneratedValue
public Long getSlno() {
return slno;
}
public void setSlno(Long slno) {
this.slno = slno;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getCompany_name() {
return company_name;
}
public void setCompany_name(String company_name)
{ this.company_name = company_name;
}
public String getCompany_id() {
return company_id;
64
}
public void setCompany_id(String company_id) {
this.company_id = company_id;
}
public String getDepartment() {
return department;
}
public void setDepartment(String department) {
this.department = department;
}
public String getRegistration_number() {
return registration_number;
}
public void setRegistration_number(String registration_number)
{ this.registration_number = registration_number;
}
}
incoming company
package com.models;
import javax.persistence.Entity;
import javax.persistence.Id;
@Entity
public class Incomingcompany {
private String company_id ;
private String company_name;
private String company_address ;
private String Job_loaction ;
private String ctc ;
65
private String requirement;
private String date;
@Id
public String getCompany_id() {
return company_id;
}
public void setCompany_id(String company_id) {
this.company_id = company_id;
}
public String getCompany_name() {
return company_name;
}
public void setCompany_name(String company_name)
{ this.company_name = company_name;
}
public String getCompany_address() {
return company_address;
}
public void setCompany_address(String company_address)
{ this.company_address = company_address;
}
public String getJob_loaction() {
return Job_loaction;
}
public void setJob_loaction(String job_loaction) {
Job_loaction = job_loaction;
}
public String getCtc() {
return ctc;
66
}
public void setCtc(String ctc) {
this.ctc = ctc;
}public String getRequirement() {
return requirement;
}
public void setRequirement(String requirement) {
this.requirement = requirement;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
AppliedCompanyRepository.java
package com.services;
import java.util.ArrayList;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.models.Appliedcompany;
@Repository
public interface AppliedcompanyRepository extends JpaRepository<Appliedcompany, String> {
ArrayList<Appliedcompany> findByDepartment(String department);
}
IncomingCompanyRepository.java
package com.services;
67
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.models.Incomingcompany;
@Repositorypublic interface IncomingCompanyRepository extends
JpaRepository<Incomingcompany, String> {
}
PlacedstudentRepository.java
package com.services;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.models.Placedstudents;
import java.util.ArrayList;
@Repository
public interface PlacedstudentRepository extends JpaRepository<Placedstudents,
String>{
ArrayList<Placedstudents> findByDepartment(String department);
}StudentDetailsRepository.java
package com.services;
import java.util.ArrayList;
68
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.models.Studentdetails;
@Repository
public interface StudentDetailsRepository extends JpaRepository<Studentdetails,
String>{
ArrayList<Studentdetails> findByEmail(String email);
}
StudentService.java
package com.services;
import java.util.ArrayList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.models.Studentdetails;
import com.models.Placedstudents;
import com.models.Appliedcompany;
@Service
69
public class StudentService {
@Autowired
StudentDetailsRepository stddetailsrepo;
@Autowired
PlacedstudentRepository placedstudentrepo;
@Autowired
AppliedcompanyRepository applycompanyrepo;
public Studentdetails addNewRecord(Studentdetails stdobj) {
//After we save return the object which is saved
Studentdetails savedobj=stddetailsrepo.save(stdobj);
return savedobj;
}
public Studentdetails checkLogin(String email, String password){
ArrayList<Studentdetails> searcheddetails= stddetailsrepo.findByEmail(email);
if(searcheddetails.size()>0) {
70
if(searcheddetails.get(0).getPassword().equals(password))
{
return searcheddetails.get(0);
}
else
return null;
}
else
return null;
}
public ArrayList<Placedstudents> findByDepartment(Placedstudents dataobj){
ArrayList<Placedstudents> searcheddetails=
placedstudentrepo.findByDepartment(dataobj.getDepartment());
if(searcheddetails.size()>0)
return searcheddetails;
else
return null;
}
71
public Appliedcompany AddAppliedCompanyRecord(Appliedcompany dataobj) {
//After we save return the object which is saved
Appliedcompany savedobj=applycompanyrepo.save(dataobj);
return savedobj;
}
}
TpoService.java
package com.services;
import java.util.ArrayList;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.models.Studentdetails;
import com.models.Incomingcompany;
import com.models.Placedstudents;
import com.models.Appliedcompany;
@Service
public class TpoService {
72
@Autowired
StudentDetailsRepository stddetailsrepo;
@Autowired
IncomingCompanyRepository incomingcompanyrepo;
@Autowired
PlacedstudentRepository placedstudentrepo;
@Autowired
AppliedcompanyRepository appliedcompanyrepo;
public ArrayList<Studentdetails> viewAllRecords() {
ArrayList<Studentdetails> allstudentdetails=new
ArrayList<Studentdetails>();
//After we save return the object which is saved
stddetailsrepo.findAll().forEach(allstudentdetails::add);
return allstudentdetails
}
public ArrayList<Studentdetails> findByEmail(String email){
73
ArrayList<Studentdetails> searcheddetails=
stddetailsrepo.findByEmail(email);
if(searcheddetails.size()>0)
return searcheddetails;
else
return null;
}
public Incomingcompany addNewIncomingCompany(Incomingcompany
incobj) {
//After we save return the object which is saved
Incomingcompany savedobj=incomingcompanyrepo.save(incobj);
return savedobj;
}
public Placedstudents AddPlacedStudent(Placedstudents dataobj) {
//After we save return the object which is saved
Placedstudents savedobj=placedstudentrepo.save(dataobj);
return savedobj;
}
public ArrayList<Appliedcompany> findByDepartment(String departmennt){
74
ArrayList<Appliedcompany> searcheddetails=
appliedcompanyrepo.findByDepartment(departmennt);
if(searcheddetails.size()>0)
return searcheddetails;
else
return null;
}
public ArrayList<Appliedcompany> viewAppliedStudentAllRecord() {
ArrayList<Appliedcompany> allaappiledstudentsrecord=new
ArrayList<Appliedcompany>();
//After we save return the object which is saved
appliedcompanyrepo.findAll().forEach(allaappiledstudentsrecord::add);
return allaappiledstudentsrecord;
}
}
SAMPLE OUTPUT
75
76
77
78
REFERENCES
∙ Mc GrawHill’s , Java : The complete reference 7thEdition, HerbertSchildit ∙
https://www.w3schools.com/angular/ for angular js reference. ∙
https://www.javatpoint.com/software-engineering-entity-relationship
diagrams
∙ Database complete reference - Avi Silberschatz Henry F. KorthS. Sudarshan ∙
https://www.javatpoint.com/dbms-tutorial -complete Database reference ∙
https://www.javatpoint.com/spring-mvc-tutorial
∙ https://www.javatpoint.com/spring-tutorial- for complete spring references ∙
https://www.researchgate.net/publication/348295543_A_Online_Job_port
al_manage ment_system
79
CONCLUSION
Our project is only a humble venture to satisfy the needs to manage their Placement
related work. Several user friendly coding have also adopted. This package shall prove
to be a powerful package in satisfying all the requirements of the college.
80