A

Minor Project Report

On
“Project Title”
Submitted in partial fulfilment for the award of the degree
of
BACHELOR OF COMPUTER APPLICATIONS
from
CHAUDHARY CHARAN SINGH UNIVERSITY, MEERUT
(Session: 2023-24)

Meerut Institute of Technology (Professional Courses), Meerut

Submitted To: Submitted By:

Mr. Lalit Kumar Student Name
HOD, BCA Deptt. BCA 5th Sem
Roll No:.....
 TABLE OF CONTENTS

Content Page No.

1. Declaration

2. Certificate

3. Acknowledgement

4. Abstract

5. Introduction of the Project

6. Objectives of the Project

7. Hardware and Software Requirements

8. Project Analysis & Designing

- DFD

- ER Diagram

9. Modules

- Process logic of each module

10. Input / Output Screenshot

11. Coding

12. Testing

13. Future Scope

14. References
 DECLARATION

I, ________________, bearing roll number ____________, hereby declare that the work

which is being presented in the Minor Project, entitled “__________________________”

in partial fulfilment for award of Degree of “Bachelor of Computer Applications” in

Department of Computer Application is submitted under the Guidance of “.....................”.

I have not submitted the matter presented in this work anywhere for the award of any

other Degree.

Date: ..............................

Student Name: ...............

Roll No.: .......................

 CERTIFICATE

Certified that the Project Report entitled “_______________________________”

submitted by_______________ bearing roll no.______________ in partial fulfilment of

the requirements for the award of the degree of Bachelor of Computer Applications is a

record of the student’s own work carried out under my supervision and guidance. To the

best of our knowledge, this Minor Project work has not been submitted anywhere for the

award of any other Degree.

It is further understood that by this certificate the undersigned does not endorser approve

of any statement made, opinion expressed or conclusion drawn therein but approve Minor

Project for the purpose for which it is submitted.

……………... Mr. Lalit Kumar

(Project-Guide) (HOD, BCA Deptt.)
 ACKNOWLEDGEMENT

Many people have supported me, in different ways, during the work with the minor

project. I’d like to thank Mr. Lalit Kumar (HOD, BCA) & my guide ………………. ….

for their kind and active support and valuable guidance during the work process. My

family has, as always, offered me their unconditional support, during my efforts in

completing this Minor Project.

However, it would not have been possible without the kind support of many individuals

and institution.

I would like to extend my sincere thanks to each and every members related to MIT (PC).

Student Name

BCA Vth Sem

Roll No.
 Abstract

The College Management System is a web-based project designed

to streamline and organize the administrative functions of a

college. Developed using HTML, CSS, and JavaScript, it includes

modules for managing students, departments, faculty, fees, and

hostel management. This project employs local storage to save and

retrieve data, eliminating the need for a backend database. It aims

to simplify operations, reduce paperwork, and improve efficiency

in managing college resources.

 Introduction of the Project

The College Management System is a user-friendly application

intended to address the common challenges faced in college

administration. With modules for adding, editing, and deleting

information related to students, faculty, departments, fees, and

hostels, this system ensures better organization and accessibility of

data. By leveraging local storage, it provides a lightweight and

accessible solution for institutions without extensive technical

infrastructure.
 Objectives of the Project
1. To provide a centralized platform for managing college data.

2. To enable efficient handling of student, faculty, and departmental

records.

3. To facilitate the tracking of fee payments and hostel allocations.

4. To reduce manual errors and paperwork through digital record-

keeping.

5. To create a lightweight solution that operates without backend

dependencies.
 Hardware and Software Requirements

Hardware Requirements:

1. Processor: Dual Core or higher

2. RAM: Minimum 4GB

3. Storage: Minimum 100MB free space

4. Display: 1024x768 resolution or higher

Software Requirements:

1. Operating System: Windows/Linux/MacOS

2. Browser: Google Chrome, Mozilla Firefox, or equivalent

3. Development Tools: Visual Studio Code, Notepad++

4. Programming Languages: HTML, CSS, JavaScript

 Project Analysis & Designing
Data Flow Diagram (DFD):
1. Level 0: Overview of the system with modules interacting
with local storage.
2. Level 1: Detailed flow for each module (e.g., Student
Management, Fee Management).
Entity Relationship (ER) Diagram:

 Entities: Student, Faculty, Department, Fee, Hostel

 Relationships: One-to-Many (e.g., Department to Students), One-to-

One (e.g., Student to Hostel Room)
 Modules
1. Student Management:
o Add, edit, and delete student records.
o Store details such as name, ID, department, and contact.
2. Faculty Management:
o Manage faculty details, including department and
specialization.
3. Department Management:
o Add and update department information.
4. Fee Management:
o Track fee payment status for students.
5. Hostel Management:
o Allocate hostel rooms to students and manage records.
Process Logic for Each Module: Each module includes forms for data
entry, buttons for CRUD operations, and uses local storage for data
persistence.
Input / Output Screenshots
 Coding
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>College- Management System</title>

<style>

/* Reset and General Styling */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Arial, sans-serif;

body {

line-height: 1.6;

/* Header and Navigation */

header {

background: #7e14af;

color: white;
 padding: 1rem;

position: fixed;

width: 100%;

top: 0;

z-index: 100;

display: flex;

justify-content: space-between;

align-items: center;

header h1 {

font-size: 1.5rem;

nav ul {

display: flex;

justify-content: center;

list-style: none;

gap: 1.5rem;

.nav-item {

position: relative;

}
.nav-item > a {

color: white;

text-decoration: none;

padding: 0.5rem 1rem;

transition: background 0.3s, color 0.3s;

.nav-item > a:hover {

background: white;

color: #1a237e;

border-radius: 4px;

.submenu {

display: none;

position: absolute;

background: white;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

border-radius: 4px;

min-width: 150px;

z-index: 200;

.nav-item:hover .submenu {

display: block;
}

.submenu a {

color: #333;

padding: 0.5rem 1rem;

display: block;

text-decoration: none;

transition: background 0.3s;

.submenu a:hover {

background: #f5f5f5;

color: #1a237e;

/* Main Content */

main {

margin-top: 100px;

padding: 2rem;

.service-page {

display: none;

max-width: 800px;

margin: 0 auto;
 animation: fadeIn 0.5s ease-in-out;

@keyframes fadeIn {

from {

opacity: 0;

to {

opacity: 1;

form {

display: flex;

flex-direction: column;

gap: 1rem;

margin: 2rem 0;

input, select {

padding: 0.5rem;

border: 1px solid #ddd;

border-radius: 4px;

transition: border-color 0.3s;

}
input:focus, select:focus {

border-color: #1a237e;

outline: none;

button {

background: #1a237e;

color: white;

padding: 0.5rem;

border: none;

border-radius: 4px;

cursor: pointer;

transition: background 0.3s;

button:hover {

background: #283593;

.list-container {

margin-top: 2rem;

border: 1px solid #ddd;

border-radius: 4px;

padding: 1rem;
}

.list-container li {

padding: 0.5rem;

border-bottom: 1px solid #eee;

display: flex;

justify-content: space-between;

align-items: center;

.list-container li button {

padding: 0.3rem 0.6rem;

font-size: 0.9rem;

/* Carousel Styling */

.slides-container {

width: 100%;

height: 90vh;

overflow: hidden;

position: relative;

.slide {

position: absolute;
 width: 100vw;

height: 100vh;

opacity: 0;

transition: opacity 1s ease-in-out;

animation: slideShow 16s infinite;

.slide img {

width: 100%;

height: 100%;

object-fit: cover;

.slide:nth-child(1) {

animation-delay: 0s;

.slide:nth-child(2) {

animation-delay: 4s;

.slide:nth-child(3) {

animation-delay: 8s;

}
.slide:nth-child(4) {

animation-delay: 12s;

@keyframes slideShow {

0%, 20% {

opacity: 1;

25%, 95% {

opacity: 0;

100% {

opacity: 1;

/* Footer */

footer {

background: #1a237e;

color: white;

text-align: center;

padding: 1rem;

position: fixed;

bottom: 0;

width: 100%;
}

/* Fee Details */

.fee-details {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 1rem;

margin-top: 1rem;

.fee-card {

border: 1px solid #ddd;

padding: 1rem;

border-radius: 4px;

transition: box-shadow 0.3s;

.fee-card:hover {

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

/* Responsive Design */

@media (max-width: 768px) {

header h1 {

font-size: 1.2rem;
 }

nav ul {

flex-direction: column;

gap: 1rem;

text-align: center;

.nav-item > a {

padding: 0.5rem;

.service-page {

width: 95%;

margin: 1rem auto;

button {

padding: 0.6rem;

@media (max-width: 480px) {

main {

padding: 1rem;
 }

button {

font-size: 0.9rem;

padding: 0.4rem;

</style>

</head>

<body>

<header>

<h1>Global Tech Institute</h1><span>Excellence in Education</span>

<nav>

<ul>

<li class="nav-item">

<a href="#" onclick="showPage('home')">Dashboard</a>

</li>

<li class="nav-item">

<a href="#" onclick="showPage('student')">Students</a>

</li>

<li class="nav-item">

<a href="#" onclick="showPage('teacher')">Faculty</a>

</li>

<li class="nav-item">
 <a href="#" onclick="showPage('department')">Academics</a>

</li>

<li class="nav-item">

<a href="#" onclick="showPage('hostel')">Housing</a>

</li>

<li class="nav-item">

<a href="#" onclick="showPage('fee')">Finance</a>

</li>

</ul>

</nav>

</header>

<div class="slides-container">

<div class="slide">

<img src="https://images.unsplash.com/photo-1562774053-701939374585?
ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Modern Campus">

</div>

<div class="slide">

<img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?
ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Library">

</div>

<div class="slide">

<img src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?
ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Student Life">

</div>

<div class="slide">

<img src="https://images.unsplash.com/photo-1592280771190-3e2e4d571952?
ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Technology Lab">
 </div>

</div>

<main>

<div id="department" class="service-page">

<h2>Department Management</h2>

<form id="department-form">

<input type="text" id="dept-name" placeholder="Department Name" required>

<input type="text" id="dept-head" placeholder="Department Head" required>

<button type="submit">Add Department</button>

</form>

<div class="list-container">

<h3>Departments List</h3>

<ul id="departments-list"></ul>

</div>

</div>

<div id="student" class="service-page">

<h2>Student Management</h2>

<form id="student-form">

<input type="text" id="student-name" placeholder="Student Name" required>

<input type="text" id="student-roll" placeholder="Roll Number" required>

<select id="student-dept" required>

<option value="">Select Department</option>

</select>
 <button type="submit">Add Student</button>

</form>

<div class="list-container">

<h3>Students List</h3>

<ul id="students-list"></ul>

</div>

</div>

<div id="teacher" class="service-page">

<h2>Teacher Management</h2>

<form id="teacher-form">

<input type="text" id="teacher-name" placeholder="Teacher Name" required>

<input type="text" id="teacher-id" placeholder="Employee ID" required>

<select id="teacher-dept" required>

<option value="">Select Department</option>

</select>

<button type="submit">Add Teacher</button>

</form>

<div class="list-container">

<h3>Teachers List</h3>

<ul id="teachers-list"></ul>

</div>

</div>

<div id="hostel" class="service-page">

 <h2>Hostel Management</h2>

<form id="hostel-form">

<input type="text" id="hostel-name" placeholder="Hostel Name" required>

<input type="number" id="room-number" placeholder="Room Number"

required>

<input type="number" id="capacity" placeholder="Room Capacity" required>

<button type="submit">Add Hostel Room</button>

</form>

<div class="list-container">

<h3>Hostel Rooms</h3>

<ul id="hostel-list"></ul>

</div>

</div>

<div id="fee" class="service-page">

<h2>Fee Management</h2>

<form id="fee-form">

<input type="text" id="student-id" placeholder="Student ID" required>

<input type="number" id="amount" placeholder="Amount" required>

<select id="fee-type" required>

<option value="">Select Fee Type</option>

<option value="tuition">Tuition Fee</option>

<option value="hostel">Hostel Fee</option>

<option value="mess">Mess Fee</option>

</select>
 <button type="submit">Add Fee Record</button>

</form>

<div class="fee-details">

<div class="fee-card">

<h3>Tuition Fee Collection</h3>

<p id="tuition-total">₹0</p>

</div>

<div class="fee-card">

<h3>Hostel Fee Collection</h3>

<p id="hostel-total">₹0</p>

</div>

<div class="fee-card">

<h3>Mess Fee Collection</h3>

<p id="mess-total">₹0</p>

</div>

</div>

</div>

</main>

<footer>

<p>&copy; 2024 Global Tech Institute. All rights reserved.</p>

</footer>

<script>

// Function to show selected page

function showPage(pageId) {

document.querySelectorAll('.service-page').forEach(page => {

page.style.display = 'none';

});

document.getElementById(pageId).style.display = 'block';

// Initialize with department page

showPage('department');

// Department Management

const departmentForm = document.getElementById('department-form');

departmentForm.addEventListener('submit', (e) => {

e.preventDefault();

const name = document.getElementById('dept-name').value;

const head = document.getElementById('dept-head').value;

let departments = JSON.parse(localStorage.getItem('departments') || '[]');

departments.push({ name, head });

localStorage.setItem('departments', JSON.stringify(departments));

updateDepartmentsList();

departmentForm.reset();

});
function updateDepartmentsList() {

const departments = JSON.parse(localStorage.getItem('departments') || '[]');

const list = document.getElementById('departments-list');

list.innerHTML = departments.map((dept, index) =>

`<li>

Department: ${dept.name} | Head: ${dept.head}

<button onclick="editDepartment(${index})">Edit</button>

<button onclick="deleteDepartment(${index})">Delete</button>

</li>`

).join('');

// Update department dropdowns

const deptSelects = document.querySelectorAll('#student-dept, #teacher-dept');

const options = departments.map(dept =>

`<option value="${dept.name}">${dept.name}</option>`

).join('');

deptSelects.forEach(select => {

select.innerHTML = '<option value="">Select Department</option>' + options;

});

// Student Management

const studentForm = document.getElementById('student-form');

studentForm.addEventListener('submit', (e) => {

e.preventDefault();
 const name = document.getElementById('student-name').value;

const roll = document.getElementById('student-roll').value;

const dept = document.getElementById('student-dept').value;

let students = JSON.parse(localStorage.getItem('students') || '[]');

students.push({ name, roll, dept });

localStorage.setItem('students', JSON.stringify(students));

updateStudentsList();

studentForm.reset();

});

function updateStudentsList() {

const students = JSON.parse(localStorage.getItem('students') || '[]');

const list = document.getElementById('students-list');

list.innerHTML = students.map((student, index) =>

`<li>

Name: ${student.name} | Roll: ${student.roll} | Department: ${student.dept}

<button onclick="editStudent(${index})">Edit</button>

<button onclick="deleteStudent(${index})">Delete</button>

</li>`

).join('');

// Teacher Management
const teacherForm = document.getElementById('teacher-form');

teacherForm.addEventListener('submit', (e) => {

e.preventDefault();

const name = document.getElementById('teacher-name').value;

const id = document.getElementById('teacher-id').value;

const dept = document.getElementById('teacher-dept').value;

let teachers = JSON.parse(localStorage.getItem('teachers') || '[]');

teachers.push({ name, id, dept });

localStorage.setItem('teachers', JSON.stringify(teachers));

updateTeachersList();

teacherForm.reset();

});

function updateTeachersList() {

const teachers = JSON.parse(localStorage.getItem('teachers') || '[]');

const list = document.getElementById('teachers-list');

list.innerHTML = teachers.map((teacher, index) =>

`<li>

Name: ${teacher.name} | ID: ${teacher.id} | Department: ${teacher.dept}

<button onclick="editTeacher(${index})">Edit</button>

<button onclick="deleteTeacher(${index})">Delete</button>

</li>`

).join('');
 }

// Hostel Management

const hostelForm = document.getElementById('hostel-form');

hostelForm.addEventListener('submit', (e) => {

e.preventDefault();

const name = document.getElementById('hostel-name').value;

const room = document.getElementById('room-number').value;

const capacity = document.getElementById('capacity').value;

let hostels = JSON.parse(localStorage.getItem('hostels') || '[]');

hostels.push({ name, room, capacity });

localStorage.setItem('hostels', JSON.stringify(hostels));

updateHostelList();

hostelForm.reset();

});

function updateHostelList() {

const hostels = JSON.parse(localStorage.getItem('hostels') || '[]');

const list = document.getElementById('hostel-list');

list.innerHTML = hostels.map((hostel, index) =>

`<li>

Hostel: ${hostel.name} | Room: ${hostel.room} | Capacity: $

{hostel.capacity}
 <button onclick="editHostel(${index})">Edit</button>

<button onclick="deleteHostel(${index})">Delete</button>

</li>`

).join('');

// Fee Management

const feeForm = document.getElementById('fee-form');

feeForm.addEventListener('submit', (e) => {

e.preventDefault();

const studentId = document.getElementById('student-id').value;

const amount = document.getElementById('amount').value;

const type = document.getElementById('fee-type').value;

let fees = JSON.parse(localStorage.getItem('fees') || '[]');

fees.push({ studentId, amount: Number(amount), type });

localStorage.setItem('fees', JSON.stringify(fees));

updateFeeTotals();

feeForm.reset();

});

function updateFeeTotals() {

const fees = JSON.parse(localStorage.getItem('fees') || '[]');

const totals = {
 tuition: 0,

hostel: 0,

mess: 0

};

fees.forEach(fee => {

totals[fee.type] += fee.amount;

});

document.getElementById('tuition-total').textContent = `₹${totals.tuition}`;

document.getElementById('hostel-total').textContent = `₹${totals.hostel}`;

document.getElementById('mess-total').textContent = `₹${totals.mess}`;

// Initial updates

updateDepartmentsList();

updateStudentsList();

updateTeachersList();

updateHostelList();

updateFeeTotals();

// Department edit/delete functions

function deleteDepartment(index) {

if (confirm('Are you sure you want to delete this department?')) {

let departments = JSON.parse(localStorage.getItem('departments') || '[]');

 departments.splice(index, 1);

localStorage.setItem('departments', JSON.stringify(departments));

updateDepartmentsList();

function editDepartment(index) {

let departments = JSON.parse(localStorage.getItem('departments') || '[]');

const dept = departments[index];

document.getElementById('dept-name').value = dept.name;

document.getElementById('dept-head').value = dept.head;

// Change form to update mode

const form = document.getElementById('department-form');

form.onsubmit = (e) => {

e.preventDefault();

departments[index] = {

name: document.getElementById('dept-name').value,

head: document.getElementById('dept-head').value

};

localStorage.setItem('departments', JSON.stringify(departments));

updateDepartmentsList();

form.reset();

// Reset form to add mode

 form.onsubmit = null;

departmentForm.addEventListener('submit', originalDepartmentSubmit);

};

// Student edit/delete functions

function deleteStudent(index) {

if (confirm('Are you sure you want to delete this student?')) {

let students = JSON.parse(localStorage.getItem('students') || '[]');

students.splice(index, 1);

localStorage.setItem('students', JSON.stringify(students));

updateStudentsList();

function editStudent(index) {

let students = JSON.parse(localStorage.getItem('students') || '[]');

const student = students[index];

document.getElementById('student-name').value = student.name;

document.getElementById('student-roll').value = student.roll;

document.getElementById('student-dept').value = student.dept;

const form = document.getElementById('student-form');

form.onsubmit = (e) => {

 e.preventDefault();

students[index] = {

name: document.getElementById('student-name').value,

roll: document.getElementById('student-roll').value,

dept: document.getElementById('student-dept').value

};

localStorage.setItem('students', JSON.stringify(students));

updateStudentsList();

form.reset();

form.onsubmit = null;

studentForm.addEventListener('submit', originalStudentSubmit);

};

// Teacher edit/delete functions

function deleteTeacher(index) {

if (confirm('Are you sure you want to delete this teacher?')) {

let teachers = JSON.parse(localStorage.getItem('teachers') || '[]');

teachers.splice(index, 1);

localStorage.setItem('teachers', JSON.stringify(teachers));

updateTeachersList();

function editTeacher(index) {
 let teachers = JSON.parse(localStorage.getItem('teachers') || '[]');

const teacher = teachers[index];

document.getElementById('teacher-name').value = teacher.name;

document.getElementById('teacher-id').value = teacher.id;

document.getElementById('teacher-dept').value = teacher.dept;

const form = document.getElementById('teacher-form');

form.onsubmit = (e) => {

e.preventDefault();

teachers[index] = {

name: document.getElementById('teacher-name').value,

id: document.getElementById('teacher-id').value,

dept: document.getElementById('teacher-dept').value

};

localStorage.setItem('teachers', JSON.stringify(teachers));

updateTeachersList();

form.reset();

form.onsubmit = null;

teacherForm.addEventListener('submit', originalTeacherSubmit);

};

// Hostel edit/delete functions

function deleteHostel(index) {
 if (confirm('Are you sure you want to delete this hostel room?')) {

let hostels = JSON.parse(localStorage.getItem('hostels') || '[]');

hostels.splice(index, 1);

localStorage.setItem('hostels', JSON.stringify(hostels));

updateHostelList();

function editHostel(index) {

let hostels = JSON.parse(localStorage.getItem('hostels') || '[]');

const hostel = hostels[index];

document.getElementById('hostel-name').value = hostel.name;

document.getElementById('room-number').value = hostel.room;

document.getElementById('capacity').value = hostel.capacity;

const form = document.getElementById('hostel-form');

form.onsubmit = (e) => {

e.preventDefault();

hostels[index] = {

name: document.getElementById('hostel-name').value,

room: document.getElementById('room-number').value,

capacity: document.getElementById('capacity').value

};

localStorage.setItem('hostels', JSON.stringify(hostels));
 updateHostelList();

form.reset();

form.onsubmit = null;

hostelForm.addEventListener('submit', originalHostelSubmit);

};

// Store original submit handlers

const originalDepartmentSubmit = departmentForm.onsubmit;

const originalStudentSubmit = studentForm.onsubmit;

const originalTeacherSubmit = teacherForm.onsubmit;

const originalHostelSubmit = hostelForm.onsubmit;

</script>

</body>

</html>

Testing
1. Unit Testing: Verifying the functionality of individual

modules.

2. Integration Testing: Ensuring data flows correctly

between modules.

3. User Acceptance Testing: Checking for usability and

bugs.
 Future Scope

1. Integrating backend databases such as MySQL or MongoDB

for larger-scale implementations, allowing more robust and

scalable data management.

2. Adding authentication and user role management to enhance

security and restrict access based on user permissions.

3. Expanding the system to include advanced features like

attendance tracking, exam scheduling, and result

management to provide a comprehensive solution.

4. Developing a mobile-friendly version with responsive design

or a dedicated mobile application to improve accessibility for

users on various devices.

5. Incorporating analytics and reporting tools to generate

insights into data trends, such as fee collection or student

performance.
 References
1. HTML, CSS, and JavaScript documentation (Mozilla

Developer Network).

2. TutorialsPoint - Local Storage in JavaScript, including use-

case scenarios and examples.

3. W3Schools - Comprehensive Web Development Resources

for beginners and professionals.

4. Stack Overflow - Community support for debugging and

improving code functionality.

5. GeeksforGeeks - Tutorials on JavaScript DOM manipulation

and data storage.

6. Coursera and Udemy courses on Front-End Web

Development for project inspiration and design best

practices.
nted in this work
anywhere for the award
of any other Degree.
Student Name
Computer Science
Enrolment No.