“COLLEGE MANAGEMENT PORTAL”

A project report submitted in partial fulfilment of the requirement for the award of the
degree of

BACHLOR OF TECHNOLOGY
in
Computer Science & Engineering
Submitted by

Manav (200560101010)
Sandeep Kumar (200560101015)
Under The Supervision Of

Miss Shalini Verma

(H.O.D) CSE

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

DOON INSTITUTE OF ENGINEERING AND TECHNOLOGY,

RISHIKESH VEER MADHO SINGH BHANDARI UTTARAKHAND
TECHNICAL UNIVERSITY
(BTech CSE)
i
 CERTIFICATE

This is to certify that Manav (200560101010), Sandeep Kumar (200560101015) students of Bachelor of
Technology, Eight Semester, Department of Computer Science and Engineering of Doon Institute of
Engineering and Technology, have pursued the final year Project titled "College Management Portal" under
the supervision of Mrs. Shalini Verma, Head of the Department (HOD). The report has been submitted in
partial fulfilment of requirements for the award of the degree, Bachelor of Technology in Computer Science
and Engineering (Doon Institute of Engineering and Technology, Rishikesh) in the Year 2023-24.

Mrs. Shalini Verma

Head of Department (CSE)
D.I.E.T
Rishikesh

ii
 ACKNOWLEDGEMENT

I want to express my deep experience to Miss. Shalini Verma, H.O.D, Department of Computer science

and engineering, Doon Institute of Engineering and Technology, secondary and other partnership

members for their guidance, support and calibration for inspection as well as for providing necessary

information regarding the project and also for helping to complete the project. without their support it would

be It will not be possible for me to complete this project. I would like to express my gratitude towards the

Head, Department of Computer science and engineering, Doon Institute of Engineering and

Technology, Rishikesh for his kind co-operation and providing necessary facilities for the completion of

this project. My thanks and appreciations also go to my friends in developing the project and people who

have willingly helped me out with their abilities.

Sincerely,
Manav
Sandeep Kumar
Place: - Haridwar
Date: - 28/04/2023

iii
CONTENTS
CERTIFICATES............................................................................................................................................ii
ACKNOWLNDGEMENT............................................................................................................................iii
ABSTRACT.................................................................................................................................................vii

CHAPTER: -
1. Introduction………………………………………………………………………………………………1
1.1 Background……………………………………………………………………………………..2
1.2 Problem Statement……………………………………………………………………………...2
1.3 Motivation……………………………………………………………………………………....2
1.4 Objectives……………………………………………………………………………………....2
1.5 Scope and Limitation of the Project…………………………………………………………….3

2. Project Overview…………………………………………………………………………..…………….4
2.1 Introduction……………………………………………………………………………………..5
2.2 College Management System Strategy…………………………….……………...……………5
2.2.1 Work to Do in College Management System………………..………….…………….5
2.2.2 College Management System for Teacher………………..…………….…………….5
2.2.3 College Management System for Student……………………………………………5

3. Used Technologies………………………………………………………………………………..……..6
3.1 Introduction…………………………………………………………………………………….7
3.1.1 Frontend Development……………………………………………..……………….7
3.1.2 Backend Development………………………………………………..…………….7
3.2 Types of Websites……………………………………………………………...………………8
3.2.1 Static Website………………………………………………………..………………8
3.2.2 Dynamic Website…………………………………………………...………………..8
3.2.3 Client-Side…………………………………………………………..……………….9
3.2.4 Server-Side…………………………………………………….…………………….9
3.3 Programming Languages……………………………………………….…………………...10
3.3.1 Html………………………………………………………...………………………10
3.3.2 Css…………………………………………………………...……………………..10
3.3.3 Js…………………………………………………………...……………………….11
3.3.4 My Sql………………………………………………………...……………………11
3.4 Web Designing Tools……………………………………………………………....………...11
3.4.1 Text Editor………………………………………………………………………....12
3.4.2 Web Browser…………………………………………………..…………………..12

4. Methodology……………………………………………….…………………………………………14
4.1 Introduction………………………………………………………………………………….15
4.2 Methodology………………………………………………………………………………...15
4.3 Prototype Model……………………………………………………………………………..15
4.3.1 Advantages of Prototyping………………………………………………………...15
4.3.2 The Process of Prototyping………………………………………………..………16
4.3.3 Reason of using Prototype Model…………………………………………..……..16
4.4 Phases in prototype Model…………………………………………………………………..16
4.5 Conclusion…………………………………………………………………………………...17

5. Analysis…………………………………………………………………………………….…………18
iv
 5.1 Introduction………………………………………………………………………………….19
5.2 System Description……………………………………………………………………...…..19
5.3 User Description………………………………………………………………………...…..19
5.4 System Requirement……………………………………………………………….…..……19
5.5 Functional Requirement…………………………………………………………………......20
5.5.1 Admin……………………………………………………………………….….….20
5.5.2 Teacher……………………………………………………………………….…....20
5.5.3 Student………………………………………………………………………….…20
5.6 Non-Functional Requirement…………………………………………………………….....20
5.6.1 Security………………………………………………………………………..…..20
5.6.2 Performance……………………………………………………………….………20
5.6.3 Availability…………………………………………………………...……………20
5.6.4 User Friendly………………………………………………………..……………..20
5.7 System Analysis………………………………………………………………….…………..21
5.7.1 Use case Diagram…………………………………………………..……………...21
5.7.2 Sequence Diagram…………………………………………………..…………….22
5.7.3 Activity Diagram…………………………………………………….……………23

6. Design and Implementation…………………………………………………………….……………24

6.1 Introduction………………………………………………………….………..…………….25
6.2 Analyse Phase………………………………………………………….…….……………..25
6.3 Build A Prototype……………………………………………………….…….……………25
6.4 Design Phase…………………………………………………………………..…………....25
6.4.1 Class Diagram………………………………………………………………….…25
6.4.2 Database Schema………………………………………………………………....25
6.5 Implementation Phase……………………………………………………………….….….26
6.6 Shnapshot ………………………………………………………………………………….26

7. Coding…………………………………………………………………………...…………………..31
7.1 Introduction……………………………………………………………………..………….32
7.2 Some Coding Phase…………………………………………………………………….….32

8. Testing…………………………………………………………………………..…………………..38
8.1 Introduction…………………………………………………………………….………….39
8.2 Website Testing……………………………………………………………………………39
8.2.1 Verification……………………………………………………………..………..39
8.2.2 Validation……………………………………………………………………......39
8.3 Software Testing Types……………………………………………………………………39
8.3.1 Manual Testing………………………………………………..………………....39
8.3.2 Automation Testing…………………………………………………..………….39
8.4 Software Testing Techniques……………………………………………………………...39
8.4.1 Functional Testing……………………………………………………….……...39
8.4.2 Usability Testing…………………………………………………………….….39
8.4.3 Interface Testing………………………………………………………………..39
8.4.4 Compatibility Testing…………………………………………………………..40
8.4.5 Performance Testing…………………………………………………………....40
8.5.6 Security testing………………………………………………………………....40

9. Conclusion and Future Work……………………………………………………………………....41

9.1 Conclusion………………………………………………………………………………..42

v
 9.2 Future…………………………………………………………………………….................42

10. References…………………………………………………………………………………………..42

FIGURE LIST: -
Figure 1: Frontend Roadmap……………………………………………………………………………….7
Figure 2: Backend Roadmap………………………………………………………………………………..8
Figure 3: Static Website…………………………………………………………………………………….8
Figure 4: Dynamic Website…………………………………………………………………………………9
Figure 5: Web Browser……………………………………………………………………………………12
Figure 6: Prototype Model Processor……………………………………………………………………..15
Figure 7: Prototype Model Phase…………………………………………………………………………16
Figure 8: Admin Use Case………………………………………………………………………………...21
Figure 9: Student Use Case………………………………………………………………………...……...22
Figure 10: Teacher Use Case…………………………………………………………….………………...22
Figure 11: Sequence Diagram……………………………………………………...……………………...23
Figure 12: Activity Diagram…………………………………………………….………………………...23
Figure 13: Database Schema……………………………………………………….……………………...25
Figure 14: Home Page……………………………………………..……………………………………...26
Figure 15: Syllabus………………………………………………………………………………..............27
Figure 16: Exam Paper………………………………………………………………………………........27
Figure 17: Department………………………………………………………………………………........27
Figure 18: Course..………………………………..……………………………………………………...28
Figure 19: ERP Logging……………………………………………………………………………….....28
Figure 20: Faculty Page………………………………………………………………………………......25
Figure 21: Attendance……………………………………………………………………………….........29
Figure 22: Marks……………………………………………………………………………….................29
Figure 23: Timetable………………………………………………………………………………...........29
Figure 24: Report………………………………………………………………………………................30

TABLE LIST: -
Table 1: User Description………………………………………………………………………………...19

vi
 ABSTRACT

Name of the website: - dietcollegebtech

This project is basically on Educational Website that is the College Website. In this project I want to show
how College information can he managed with less effort and more output and can be made available to
everyone who needs to access.
This project i.e., dietcollegebtech.in provides the user that is students, teachers, parents with better and
efficient means of managing all the resource and keep all the records and data.
This project that is website is made up of different programming languages i.e., Html5 (hypertext pre-
processor, version5), CSS3 (cascading style sheet), JS (java script), MySQL. In this project we have taken
various pages and each page corresponding to a specific type of information regarding on college website.
The main advantage of this project is to useful for people who do not reside in the same site or place in
which the college is located and can easily access from any place where they want.
As technology is growing faster and raster it is required that each and every information about any
educational activity should be made available on the internet, so with this purpose a college website
dietcollegebtech.in is being built so that every information, updating could be made available to the
students, facilities and parents online.
dietcollegebtech.in is a website to be accessed by the people globally. This website is very easy to use and
fulfils all the requirement of the User. There are many features which helps students and parents to keep
records of available information.
It is much more attractive website i.e., dietcollegebtech than others website of educational website.

Some of the pages are as follows: -

Home page, about us, Login page, Department, Syllabus, Notes, Contact us, ERP etc

vii
 Chapter 1
INTRODUCTION

1
1.1 Background
Nowadays education plays a great role in the development of any country. Many education organizations
try to increase education quality. One of the aspects of this improvement is managing College resources.
Our system is a major tool in this management process by making continuous management by the
administration, of teacher, parents, and students. So, in order to achieve that goal, we need a portal that
covers the needs of all users at the same time.
Students, they can view their subject's grades, drop a request or make request or can send message to the
administration and the staff members, recommendation or an absence permission, and they are also up to
date with all school's news or posts that publish by the other users.
For administration, they have full control of the system, like they can add a new parent, teachers, and
students with their subjects.
For Teachers, they can add student's grades, their subjects of the respective class or edit it for their own
subjects only.

1.2 Problem Statement

The academic achievement for many students has decline, because of lake of care of them from their
parents, and this refer to that their parents do not have a free time to come to school. Administration and
Teachers are facing problems at the start of every new academic year, because of the distribution process
for courses and classes, in addition to this, through and at the end of every year another problem is facing
them, which is the complexities of the grade’s entry process for their students, Lack of communication after
a college day between administration, Teachers, and Students, has a bad reflection on the educational
process.

1.3 Motivation
The importance of college education lies in the fact that the children of today will become adult citizens of
tomorrow. The growth and future of our country highly depend upon the quality of the present College
education system. And in a good school, the chief objective is to stimulate interest and curiosity in the
students and provide all possible facilities for administration, teachers and students to achieve the desired
goal which is better and easier educational ways for students.
So, the motivation Cor our project came from that it has been made for that purpose, and for trying hard to
achieve all the previous goals.

1.4 Objectives
➢ To build a portal to manage the different College activities.
➢ To track students' grades from their parents,
➢ To facilitate the distribution process of courses and classes for teachers,
➢ To facilitate the grades entry process for students by teachers.
➢ To make a virtual community between the members of the educational process.

2
1.5 Scope and Limitation of the Project
College Management System has been designed to provide an easy way to do the work and track records
for the students, staff, and administration.
This project is facing some obstacles which is deny it from achievement it's goals, like: lack of acceptance
these idea from some teachers and headmasters, because of their poor knowledge about using that
technolect or they find that using computers in their works instead of the paper works so hard and difficult.
And also, the same thing for some parents where they do not prefer that way for the same previous reasons.

3
 Chapter 2
PROJECT OVERVIEW

4
2.1 Introduction
This chapter identifies the concepts of college management. teachers, and students. Also, review the
related works with it.

2.2 College Management System Strategy:

College Management System is a complete College information management solution. Today's schools
need to manage more information than ever before. Without a solid internal infrastructure for teachers,
administration and departments to share data, critical College and student information can be lost, or
worse leading to a host of problems that can effect of a school's image and endurance. To remain
competitive, the College needs a simple solution that can run individual function, connect their entire
operation, use the portal as a key communication tool, and simplify day-to-day operational
responsibilities, giving staff more time with students.
College Management System helps to automate various scheduling activities of the college and optimizes
the use of premium resources. Concerned authorities can now easily and seamlessly use the system to
track records, otherwise it was a time-consuming and tedious task.

2.2.1 Work to Do in College Management System:

➢ Single point College management Portal
➢ Enable the internet front-end for the school.
➢ Connect with Parents and other stakeholders effectively
➢ Build and manage a community of parents, teachers, and students
➢ Manages all administrative records with zero redundancy
➢ Achieve the best possible resource optimization
➢ Automate all operational functions like fees, Attendance, Exam Management
➢ Automatic generation and regeneration of timetable with dynamic substitute management.

2.2.2 College Management System for Teacher:

➢ Complete marks/grade management
➢ Publish articles for others.
➢ Interact with parents efficiently and effectively.
➢ View analytical reports.

2.2.3 College Management System for Student:

➢ Real time exposure for better learning
➢ Publish article to share knowledge, experience and views.
➢ View online marks and timetable for exams.
➢ Interaction with teachers and administration.
➢ View the Timetable in advance.
➢ View current events and holidays at school.

5
 Chapter 3
USED TECHNOLOGIES

6
3.1 Introduction
Web development refers to the creating, building, and maintaining of websites. It includes aspects such
as web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:
➢ Web: It refers to websites, web pages or anything that works over the internet.
➢ Development: It refers to building the application from scratch.

Web Development can be classified into two ways:

➢ Frontend Development
➢ Backend Development

3.1.1 Frontend Development:

The part of a website where the user interacts directly is termed as front end. It is also referred to as the
‘client side’ of the application.

Frontend Roadmap

Figure 1: Frontend Roadmap

3.1.2 Backend Development:

Backend is the server side of a website. It is part of the website that users cannot see and interact with. It
is the portion of software that does not come in direct contact with the users. It is used to store and arrange
data.

7
Backend Roadmap

Figure 2: Backend Roadmap

3.2 Types of Websites

A website can be of different types depending upon how often the content needs to be updated or how the
page is viewed at different browser width. These can be differentiated as:
➢ Static Website
➢ Dynamic Website

3.2.1 Static Website:

Static websites are the websites that doesn’t change the content or layout dynamically with every
request to the web server. Static websites display exactly the same information whenever anyone visits
it. User sees the updated content of Static Website only when a web author manually updates them with
a text editor or any web editing tool used for creating websites. Static webpages do not have to be
simple plain text. They can feature multiple design and even videos.

Figure 3: Static Website

3.2.2 Dynamic Website:

8
Dynamic Website is a website containing data that can be mutable or changeable. It uses client-side or
server scripting to generate mutable content. Like a static website, it also contains HTML data.
Dynamic websites are those websites that changes the content or layout with every request to the
webserver. These websites have the capability of producing different content for different visitors from
the same source code file. There are two kinds of dynamic web pages i.e. client-side scripting and server-
side scripting. The client-side web pages changes according to your activity on the web page. On the
server-side, web pages are changed whenever a web page is loaded.
Example: login & signup pages, application & submission forms, inquiry and shopping cart pages. A
Typical Architecture of dynamic website

Figure 4: Dynamic Website

There are different languages used to create dynamic web pages like PHP, ASP, .NET and JSP. Whenever
a dynamic page loads in browser, it requests the database to give information depending upon user’s
input. On receiving information from the database, the resulting web page is applied to the user after
applying the styling codes.

3.2.3 Client-Side:
Client-side development, sometimes referred to as front-end development, is a type of development that
involves programs that run on a client's or user's device. Client-side developers focus on creating the part
of a website with which the user interacts.
This type of development focuses on the front part of an application that users can see. Client -side
developers complete a variety of tasks, including:

➢ Creating website layouts

➢ Designing user interfaces
➢ Adding form validation
➢ Reviewing the performance of websites
➢ Adding visual design elements like colours and fonts
➢ Making website features more functional
➢ Resolving any issues that users encounter on a site

3.2.4 Server-Side:
Server-side development, sometimes called back-end development, is a type of development that involves
programs that run on a server. This type of programming is important because web browsers, or clients,
interact with web servers to retrieve information. Users don't see this development because it happens on
servers. Common server-side tasks include:

➢ Coding dynamic websites

9
 ➢ Developing web applications
➢ Connecting websites to databases
➢ Implementing content management systems
➢ Making sure programs retrieve information properly
➢ Ensuring systems are safe from hackers
➢ Restoring and backing up files

3.3 Programming Languages

3.3.1 Html:
Hypertext Markup Language (HTML) is the most popular markup language in the world, and it is a must-
learn for front-end web developers. Compared to languages like JavaScript and Python, HTML is
relatively simple.

HTML is a declarative markup language. It defines the elements of a web page through labeling—it does
not process logic, manipulate data, or take inputs and produce outputs like a scripting language would. It
is strictly used for page structuring and templating. Most beginning front-end developers start by learning
HTML, and the format that web pages take when stored on servers.

HTML uses sections called “element blocks” to indicate parts of a website. Within those blocks, HTML
adds tags to specify how different elements should look. For example:

➢ <img> displays an image.

➢ <h2> indicates a heading.
➢ <p> signifies a paragraph.

It’s impossible to code a functioning website without HTML. In fact, if you right-click on any web page
(not on a link) and select View Page Source, you can see the HTML for that site.

3.3.2 Css:
Cascading Style Sheets (CSS) works hand-in-hand with HTML. CSS is a styling language—a special
kind of declarative language that describes what HTML code should look like on-screen.

CSS can:

➢ Position an element somewhere specific on the page.

➢ Add shading and borders.
➢ Specify the colour and style of a link.
➢ Change the size, font, or colour of the text.
➢ Alter page background colour.
➢ Animate page elements and sprites.
➢ And much (much) more...

CSS is slightly more complex than HTML, but it’s still accessible to beginners and especially important
for web design. Once you learn the basics, you can expand your knowledge with extension languages
like SASS and its syntax SCSS.

10
3.3.3 Js:
In 2020, for the eighth year running, JavaScript topped the list of most popular programming languages
in Stack Overflow’s Developer Survey. Along with CSS and HTML, JavaScript is one of the three core
web programming languages.

JavaScript is a scripting language. It runs directly from its source code; it doesn’t need to be translated
into machine code before it runs.

JavaScript is also a full-stack language—though it’s most commonly used on the front end. JavaScript
creates interactive web page elements like:

➢ Clickable buttons
➢ Images that can zoom in and out
➢ On-page audio and video

JavaScript codes the front end of some of the world’s most famous websites LinkedIn, Amazon,
Facebook, and more.

Programmers also use JavaScript to create server-side applications using the runtime environment
Node.js. Node.js lets developers write JavaScript programs for operating systems like Linux, macOS, and
Windows.

JavaScript is satisfying to use and relatively quick to learn, thanks to a massive user community and
plenty of documentation. Once you’re familiar with the basics of JavaScript, you can start using libraries
and frameworks that expand what this language can do.

3.3.4 MySql:
MySQL is a relational database management system. You use it to store data in tables, and the rows of those
tables can be related to each other by common information in the columns. The basic idea is that you have
one or more "tables" (or "databases") and a set of rows (records) and columns (fields). Other elements, like
keys and indexes, help you define them further.

MySQL is a database management system used in web applications, which is available for Linux, Microsoft
Windows, Mac OS X, and Solaris. MySQL comes with many web hosting packages. You can download
MySQL Server software, pronounced “my sequel,” from the official website.

3.4 Web Designing Tools

Web designing gives the power to create digital environments that encourage user activity. Web design
refers to the creatives that are displayed on the internet. A web designer is responsible for transforming
concepts/ideas of websites into responsive and interactive web pages.

Web design is directly linked to the visual components of a web application. It is reported that 75% of
website credibility is due to its design and 89% of website viewers move to a competitor site if the user
experience is not up to the mark. Hence, ensuring the web designs are robust and aesthetic for the
application’s success is essential.

There are many types of tools available that web designers can use, such as:

11
 • Website builders that don’t require any coding experience
• Web design tools that include a code editor and visual design software
• Design tools that help in making prototypes
3.4.1 Text Editor:
A text editor is a tool that allows a user to create and revise documents in a computer. Though this task
can be carried out in other modes, the word text editor commonly refers to the tool that does this
interactively. Earlier computer documents used to be primarily plain text documents, but nowadays due
to improved input-output mechanisms and file formats, a document frequently contains pictures along
with texts whose appearance (script, size, colour and style) can be varied within the document. Apart
from producing output of such wide variety, text editors today provide many advanced features of
interactive Ness and output.

3.4.2 Web Browser:

The web browser is an application software to explore www (World Wide Web). It provides an interface
between the server and the client and it requests to the server for web documents and services. It works
as a compiler to render HTML which is used to design a webpage. Whenever we search for anything on
the internet, the browser loads a web page written in HTML, including text, links, images, and other items
such as style sheets and JavaScript functions. Google Chrome, Microsoft Edge, Mozilla Firefox, and
Safari are examples of web browsers.

Figure 5: Web Browser

Some Popular Web Browsers
Here is a list of 7 popular web browsers:
1. Google Chrome: Developed by Google, Chrome is one of the most widely-used web browsers in the
world, known for its speed and simplicity.
2. Mozilla Firefox: Developed by the Mozilla Foundation, Firefox is an open-source browser that is known
for its privacy features and customization options.
3. Apple Safari: Developed by Apple, Safari is the default browser on Mac and iOS devices and is known
for its speed and integration with other Apple products.
12
4. Microsoft Edge: Developed by Microsoft, Edge is the default browser on Windows 10 and is known for
its integration with other Microsoft products and services.
5. Tor Browser: Developed by The Tor Project, Tor Browser is a web browser that is designed for
anonymous web browsing and is based on Mozilla Firefox.
6. Opera: Developed by Opera Software, Opera is a web browser that is known for its speed and built-in
VPN feature.
7. Brave: Developed by Brave Software, Brave is a web browser that is focused on privacy and security
and blocks third-party ads and trackers by default.

13
 Chapter 4
METHODOLOGY

14
4.1 Introduction
This chapter states the methodology used to reach the objectives of the project. The framework in which
software is designed, developed, and maintained is known as the Software Development Life Cycle
(SDLC). It shows the steps, phases, milestones, and evolution of the software development process. There
are many types of models used in software design and development. Among them are the spiral models,
rapid development model, Evolutionary model, waterfall model, prototyping model, etc.

4.2 Methodology
Prototyping Model has been used to develop this application. The Prototyping model is a technique for
quickly building a function but incomplete model of the information system. There are several kinds of
prototypes but they all intend to reduce risk by building a quick and dirty replica or mock-up of the intended
system. It can be used to demonstrate technical feasibility when the technical risk is high. It can also be
used to better understand and elicit user requirements. In either case, the goal is to reduce risk and limit
costs by increasing understanding of proposed solutions before committing more resources, as shown in
figure 1.

Figure 6: Prototype Model Processor

4.3 Prototype Model

4.3.1 Advantages of Prototyping

➢ Reduces development time.
➢ Reduces development costs.
➢ Requires user involvement.
➢ Developers receive quantifiable user feedback.
➢ Facilitate system implementation since users know what to expect.
➢ Results in higher user satisfaction.
➢ Exposes developers to potential future system enhancements.

15
4.3.2 The Process of Prototyping
➢ Identify basic requirement: Determine basic requirements including the input and output
information desired. Details, such us security, can typically be ignored.
➢ Develop initial prototype: The initial prototype is developed that includes only user interfaces.
➢ Review: The customers, end-users, examine the prototype and provide feedback on additions or
changes.
➢ Revise and enhancing the prototype: Using the feedback, both the specifications and the prototype
can be improved.
➢ This method involves a series of iterations and refinement until the prototype product is a fully
working system, and the user is satisfied.

4.3.3 Reason of using Prototype Model

➢ Users are actively involved in the development.
➢ Since in this methodology a working model of the system is provided, the users get a better
understanding of the system being developed.
➢ Errors can be detected much earlier.
➢ Quicker user feedback is available leading to better solutions.
➢ Missing functionality can be identified easily.
➢ Confusing or difficult functions can be identified requirements validation, quick implementation
of incomplete, but functional application.

4.4 Phases in prototype Model

Figure 7: Prototype Model Phase

Phase 1:
Identify some requirements to begin with: Get lists of some major requirements which define the need
for the new system including the main input output information.

Phase 2:
Develop initial prototype: Develop a basic initial prototype which only has IJI screens.

16
Phase 3:
Review the prototype: End users and SME’s work and examine the prototype and provide feedback for
improvements/enhancements.

Phase 4:
Revise and enhance the prototype: Scope is changed based on feedback from end users and the prototype
is enhanced and refined to accommodate user feedback.

4.5 Conclusion
We used Prototyping Model as our methodology for developing this system, and we described the
advantages of prototyping, its process, it’s phases and reasons of using its model.

17
Chapter 5
ANALYSIS

18
5.1 Introduction
This chapter will provide a full description of the system and its users. Then it depicts the functional and
non-functional requirements that have been collected using several methods like brainstorming, interview
and e-surveys. After determining the most important requirements, requirement analysis was adopted using
several tools such as use-case diagram, sequence diagram and activity diagram.

5.2 System Description

College Management System is a portal that serving Students, Teachers, and administration. The main idea
of our system is to allow the students to be up to date with the college activities and with their grades, and
the same thing for their parents in addition to be in touch permanently with the teachers and the
administration for any complaint, recommendation or anything that related to their students. And for
teachers it considers as an easy way to manage their job’s day, to be in touch with students and to enter their
grades or anything they want to send it or view it to the students. And for the administration, have full
control of the system, and like the teachers, it will be a great tool to manage their days and plans for the
school, also they will be in a permanent connection with all the other users which will be a wonderful virtual
educational social community that definitely will improve the student’s performance and education, and
make the College for them really as they second’s home.

5.3 User Description

There are four main users for the proposed system; these are Admin, student, teacher and parent. Each user
can perform several different functions during the use of the system. These functions were determined
according to the design of the proposed system and user-friendly functions to make the system more
effective and efficient. Figure 4 summarizes the functions performed by each user.

USER FUNCTIONS
ADMIN • Log In/Out
• Add New Subject
• Add New Class
• Add New Teacher
• Edit Teacher
• Add New Student
• Edit Student
• Post tasks and any updates
TEACHER • Log ln/Out
• Enter student’s grades
• Add any class notes
• Add exam or test details
STUDENT • Log In/Out
• View Subjects Notes
• View Syllabus
• View Attendance

Table 1: User Description

5.4 System Requirement
Before creating any portal or a mobile App, it is necessary to visualize the layout, design and all features
intended to be incorporated. In addition, how users will interact with each page and icon and how the
website should perform (behaviour, load time etc.). Requirements are the necessary attributes in the system.
a statement that identifies a capability, characteristic or quality factor of the system in order to have value
and utility to the users, Once the requirements are set, developers can initiate the other technical work

19
including system design, development, testing, implementation, and operation. For any system, there are
functional and non-functional requirements to be considered while determining the requirements of the
system. The function I requirements are user "visible" features that are typically initiated by stakeholders
of the system. such as generate report, login, and signup. On the other hand, non-functional requirements
are requirements that describe how the system will do what it is supposed to do, for example, security,
reliability and maintainability.

5.5 Functional Requirement

5.5.1 Admin:
➢ Create, edit and delete student account.
➢ Create, edit and delete teacher account.
➢ Post tasks or any updates for users (Teacher, Student).
➢ Store, edit, delete, calculate and print student's grade.
➢ Add Classes and Subject and connect them with the subject's teachers.
➢ Promote Student To the next Class
➢ Track and View all Records

5.5.2 Teacher:
➢ Enter Student's grades per Subject.
➢ Contact with students and parents.
➢ Post tasks or any updates for users (Admin, Student).
➢ View The Student Details
➢ Add any Exam of the Class

5.5.3 Student:
➢ View their grades.
➢ Contact with their teacher and headmaster.
➢ Request a Leave
➢ View Attendance
➢ Track Fee Details
➢ Get Notifications about Latest Events
➢ Check Their Exam schedule

5.6 Non-Functional Requirement

5.6.1 Security:
Every user has his own account and only authorized users can access the system with username and
password. The passwords are encrypted using a PHP.

5.6.2 Performance:
Easy tracking of records and updating can be done.

5.6.3 Availability:
The system is available to users anytime, anywhere, just need a PC and an Internet Connection. Also, the
system work in multiple web browsers like (Chrome, Mozilla, Opera, and Internet Explorer).

5.6.4 User Friendly:

The system has a friendly user interface and the system very interactive.

20
5.7 System Analysis
This part contains the analysis of the functional and non-functional requirements using use-case diagrams,
and use-case details. In addition, the interactive behaviour of the activities is analysed using sequence
diagrams and activity diagrams.

5.7.1 Use case Diagram:

This part contains the analysis of the functional and non-functional requirements using use-case
diagrams, and use-case details.

1. Admin
The functions that Admin can do after login, as shown in figure 7:

➢ Add Teacher include (Modify/Delete).

➢ Add Student include (Modify/Delete).
➢ Add Parent include (Modify/Delete).
➢ Add Class include (Modify/Delete).
➢ Contact with teachers, students and parents.

Figure 8: Admin Use Case

2. Student
The functions that Student can do after login, function as shown in figure 8:

➢ View Personal Information.

➢ View Courses Marks.
➢ View Personal Details.
➢ Contact with teachers and admin.

21
 Figure 9: Student Use Case
3. Teacher
The functions that Teacher can do after login, as shown in figure 9:

➢ Enter Student's grades.

➢ Modify or delete grades.
➢ Contact with students, parents and headmaster.

Figure 10: Teacher Use Case

5.7.2 Sequence Diagram:

Describes an Interaction by focusing on the sequence of Messages that are exchanged, along with them
corresponding Occurrence Specifications on the Lifelines.

22
 Figure 11: Sequence Diagram

5.7.3 Activity Diagram:

Describe dynamic aspects of the system. It is basically a flow chart to represent the flow form one activity
to another activity. The activity can be described as an operation of the system. So the control flow is drawn
from one operation to another.

Figure 12: Activity Diagram

23
 Chapter 6
DESIGN AND IMPLEMENTATION

24
6.1 Introduction
This chapter explains the design and implementation phases of the system, it depicts the class diagram, ER
diagram and database schema the System. Moreover, the implementation phase combines the requirements,
design phase outputs, and process them using the appropriate technologies.

6.2 Analyse Phase

During the analyse phase, we determine the requirement of the project and get in touch how we can improve
the school's performance, also we determine how implement the school's needs to help them to get
professional work.

6.3 Build A Prototype

In this phase, the tools used in developing the prototype and the developed system are described:

The system is developed using web development techniques (HTMLS, CSS3, JavaScript, jQuery) that let
us design the system layout such as login form, tables, panels and colours, then implement UI/UX element's
such as

➢ Make the system ease to use.

➢ Make the system ease to learn.
➢ Choose the website colour’s carefully to enhance user interfaces

Then, make the system dynamic using programming tools (PHP v7, MYSQL DBMS) it's let us store the
user's information in the database and view it through the Web Pages using PHP v7.

6.4 Design Phase

During the design phase, the relationships between classes were designed and analysed using the class
diagram. After that, the database schema was developed to illustrate the mapping of the data.

6.4.1 Class Diagram:

To illustrate the relationships and source code dependencies among classes, class diagram was developed.
In this context, the class defines the methods and variables in an object, which is a specific entity in a
program or the unit of code representing that entity.

6.4.2 Database Schema:

A database schema is the skeleton structure that represents the logical view of the entire database. It defines
how the data is organized and how the relations among them are associated. It formulates all the constraints
that are to be applied on the data.

The system has five database tables as shown in Figure 16. Each table contains an ID and several different
attributes related to different functions in the system.

Figure 13: Database Schema

25
6.5 Implementation Phase
After developing the databases of the system, the implementation phase emerges and through this phase,
several activities and techniques were used to develop this portal, as shown in below. The development of
the website starts with designing the website structure using HTML5, then the style of the website was
designed using CSS3. After that, enhanced user interfaces and dynamic website were developed using
JavaScript and jQuery. Later on, the website contents and databases were managed through the use of PHP7.
Finally, the panorama was incorporated in the portal.

6.5 Snapshot’s

Figure 14: Home Page

26
 Figure 15: Syllabus

Figure 16: Exam Paper

Figure 17: Department

27
 Figure 18: Course

Figure 19: ERP logging

Figure 20: Faculty Page

28
Figure 21: Attendance

Figure 22: Marks

Figure 23: Timetable

29
Figure 24: Report

30
Chapter 7
CODING

31
7.1 Introduction
The coding phase in the software engineering paradigm is usually defined after the designing
phase. In this phase, the developers or the coders have to implement the software design
practically using any computer language (s) so that the software can be created and the user can
use it.

7.2 Some Coding Phase

7.2.1 Html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://unpkg.com/phosphor-icons"></script>

</head>
<body>
<div class="background-image">
<header class="header1">
<a href="home.html" class="logo"> <i class="fas fa-graduation-cap"></i> DIET </a>
<div id="menu-btn1" class="fas fa-bars"></div>
<nav class="navbar1">
<ul>
<li><a href="home.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="syllabus.html">syllabus</a></li>
<li><a href="#">courses +</a>
<ul>
<li><a href="firstYEAEALL.html">firstyear</a></li>
<li><a href="computerscenceyear.html">Computer science and engineering (CSE)</a></li>
<li><a href="civile1.html">civil engineering (CE)</a></li>
<li><a href="electrical1.html">Electrical engineering (EE)</a></li>
<li><a href="ppe1.html">Mechanical engineering(ME)</a></li>
<li><a href="course-2.html">Other Courses</a></li>
</ul>
</li>
<li><a href="#">pages +</a>
<ul>
<li><a href="teachers.html">teachers</a></li>
<li><a href="blog.html">blogs</a></li>
</ul>
</li>
<li><a href="contact.html">contact</a></li>
32
 </header>
<div class="br"><br></div>
<section class="home">

<div class="image">
<img src="images/pu.png">
</div>

<div class="content">
<h3>DOON GROUP INSTITUTE ENGINEERING AND TECHNOLOGY </h3>
</div>
</video>

</section>

<section class="category">

<a href="firstYEAEALL.html" class="box">

<img src="images/firstyear.jpg" alt="">
<h3>first year</h3>
</a>
<a href="computerscenceyear.html" class="box">
<img src="images/category-1.jpg" alt="">
<h3>computer science engineering (CSE)</h3>
</a>

<a href="civile1.html" class="box">

<img src="images/category-2.jpg" alt="">
<h3>civil engineering</h3>
</a>
<a href="electrical1.html" class="box">
<img src="images/category-3.jpg" alt="">
<h3>Electrical engineering</h3>
</a>

<a href="ppe1.html" class="box">

<imgsrc=https://img.freepik.com/free-vector/hand-drawn-mechanical-engineering-logo
template_23-2150007331.jpg?w=2000 alt="">
<h3>Mechanical engineering</h3>
</a>
</section>
<section class="category">
<a href="exampaper.html" class="box">
<img src="images/list.png" alt="">
<h3>Previous Year Exam Paper</h3>
</a>

<a href="form.html" class="box">

<img src="images/employee.png" alt="">
33
 <h3>Registration form</h3>
</a>

<a href="syllabus.html" class="box">

<img src="images/6163220_2538.jpg" alt="">
<h3>syllabus</h3>
</a>

<a href="http://127.0.0.1:8000/" class="box">

<img src="images/erp.png" alt="">
<h3>ERP Portal</h3>
</a>

</section>
<!-- footer section starts -->

<section class="footer1">

<div class="box-container">

<div class="box">
<h3>explore</h3>
<a href="home.html"> <i class="fas fa-arrow-right"></i> home </a>
<a href="about.html"> <i class="fas fa-arrow-right"></i> about </a>
<a href="syllabus.html"> <i class="fas fa-arrow-right"></i> syllbus </a>
<a href="firstYEAEALL.html"> <i class="fas fa-arrow-right"></i> First Year</a>
<a href="course-1.html"> <i class="fas fa-arrow-right"></i> CSE </a>
<a href="civile1.html"> <i class="fas fa-arrow-right"></i> Civil</a>
<a href="electrical1.html"> <i class="fas fa-arrow-right"></i> Electrical </a>
<a href="ppe1.html"> <i class="fas fa-arrow-right"></i> Mechanical</a>
<a href="teachers.html"> <i class="fas fa-arrow-right"></i> teachers </a>
<a href="blog.html"> <i class="fas fa-arrow-right"></i> blog </a>
<a href="contact.html"> <i class="fas fa-arrow-right"></i> contact </a>
</div>
<div class="box">
<h3>quick links</h3>
<a href="https://www.linkedin.com/in/sandeep-kumar-29182218a/"> <i class="fas fa-arrow-
right"></i> my account </a>
<a href="https://www.ambitionbox.com/reviews/sdimt-reviews"> <i class="fas fa-arrow-
right"></i> feedback </a>
<a href="https://www.educrib.com/dehradun/colleges/doon-institute-of-engineering-and-
technology-diet-dehradun"> <i class="fas fa-arrow-right"></i> help center </a>
<a href="https://dooninstitute.in/approvals"> <i class="fas fa-arrow-right"></i> certificates
</a>
<style>
.background-image {
background-image: url('./akki.jpg');
background-size: cover;
background-repeat: no-repeat;
height: initial;
34
 background-attachment: fixed;

}
</style>

<!-- footer section ends -->

<!-- custom js file link -->

<script src="js/script.js"></script>
<script src="js/script1.js"></script>

</body>
</html>
7.2.1 CSS

@import
url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap");
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-transform: capitalize;
text-decoration: none;
outline: none;
border: none;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}

html {
font-size: 62.5%;
overflow-x: hidden;
}

section {
padding: 3rem 9%;
}

.btn {
display: inline-block;
margin-top: 1rem;
padding: 1rem 3rem;
background: #e9edfb;
color: #224bcf;
cursor: pointer;
border-radius: .5rem;
font-size: 1.7rem;

35
}
.btn:hover {
color: #fff;
background: #224bcf;
}

.heading {
background: url(../images/heading-bg.png) no-repeat;
background-size: cover;
background-position: center;
}

.heading h3 {
font-size: 3.5rem;
color: #302851;
}

.heading p {
font-size: 1.6rem;
color: rgb(24, 163, 84);
padding-top: .5rem;
}

.heading p a {
padding-right: .5rem;
color: #fa1d86;
}

.heading p a:hover {
color: #224bcf;
}

.header {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0 9%;
background: #224bcf;
36
}
.header .logo {
font-size: 2.5rem;
font-weight: bolder;
color: #fff;
}

.header .logo i {
color: #6e6c6d;
}

.header .navbar ul {
list-style: none;
}

7.2.1 JS
let navbar = document.querySelector('.header .navbar');

document.querySelector('#menu-btn').onclick = () =>{
navbar.classList.toggle('active');
}

window.onscroll = () =>{
navbar.classList.remove('active');
}

let mainVid = document.querySelector('.main-video');

document.querySelectorAll('.course-3 .box .video video').forEach(vid =>{

vid.onclick = () =>{
let src = vid.getAttribute('src');
mainVid.classList.add('active');
mainVid.querySelector('video').src = src;
}

});

document.querySelector('#close-vid').onclick = () =>{
mainVid.classList.remove('active');
}

37
Chapter 8
TESTING

38
8.1 Introduction
Website testing can be stated as the process of verifying and validating whether a software or is bug-free.
technical requirements as guided by its design and development, and the user requirements effectively and
efficiently by handling all the exceptional and boundary cases. The process of software testing aims not
only at finding faults in the existing software but also at finding measures to improve the software in terms
of efficiency, accuracy, and usability. It mainly aims at measuring the specification, functionality, and
performance of a software program or application.

8.2 Website Testing

8.2.1 Verification:
It refers to the set of tasks that ensure that the software correctly implements a specific function.

8.2.2 Validation:
It refers to a different set of tasks that ensure that the software that has been built is traceable to customer
requirements.

8.3 Software Testing Types

8.3.1 Manual Testing:

Manual testing includes testing software manually, i.e., without using any automation tool or any script.
In this type, the tester takes over the role of an end-user and tests the software to identify any unexpected
Behaviour or bug. There are different stages for manual testing such as unit testing, integration testing,
system testing, and user acceptance testing. Testers use test plans, test cases, or test scenarios to test
software to ensure the completeness of testing. Manual testing also includes exploratory testing, as
testers explore the software to identify errors in it.

8.3.2 Automation Testing:

Automation testing, which is also known as Test Automation, is when the tester writes scripts and uses
another software to test the product. This process involves the automation of a manual process. Automation
Testing is used to re-run the test scenarios quickly and repeatedly, that were performed manually in manual
testing. Apart from regression testing, automation testing is also used to test the application from a load,
performance, and stress point of view. It increases the test coverage, improves accuracy, and saves time and
money when compared to manual testing.

8.4 Software Testing Techniques

Software testing techniques can be majorly classified into two categories:

8.4.1 Functional Testing:

Tests whether all features function correctly based on specified requirements.

8.4.2 Usability Testing:

Tests the navigation, design, and user satisfaction of the website or application.

8.4.3 Interface Testing:

Tests the interaction between the website or application and other systems, such as servers, databases, and
browsers.

39
8.4.4 Compatibility Testing:
Tests whether the website or application works well on different devices, platforms, and browsers.

8.4.5 Performance Testing:

Tests the speed, load, and stress of the website or application.

8.5.6 Security testing:

Tests the protection and privacy of the website or application from unauthorized access or attacks.

40
 Chapter 9
CONCLUSION AND FUTURE
WORK

41
9.1 Conclusion
In recent years, with the pace of technological development, people have become more and more
demanding in of quality of life, and the school’s managers in recent years look to improve a performance
College to get the highest rate of knowledge and experience in their student.

9.2 Future
Some ideas and features can be considered as a future work for this project. These features can be
summarized in the following points:
➢ Let the student perform exams Online.
➢ Bank of question per subject.
➢ Let teacher add questions to the bank of question.
➢ Let admin add new classes.
➢ Add a medical examination part to the system, with a medical supervisor as a new user.

42
 Chapter 10
REFERENCES

43
https://www.w3schools.com/whatis/whatis_frontenddev.asp
https://www.bing.com/images/search?q=frontend+developer&form=HDRSC3&first=1
https://www.geeksforgeeks.org/back-end-developer-roadmap/
https://developer.mozilla.org/en-US/docs/Learn/CSS
https://javascript.info

44