CONTENTS Page - Merged

CONTENTS
page no
Abstract ii
CHAPTER-1 0-12
1.1 Introduction 1
1.1.1 Introduction 1
1.1.2 Purpose 1
1.1.3 Audience 1
1.1.4 Scope of Document 1
1.2 Overview and Specification 2-4
1.2.1 Definition 2
1.2.2 System Overview 2
1.2.2.1 Introduction 2
1.2.2.2 Modules 2
1.2.2.3 Types of Users 4
1.3 Requirement Specification 5
1.3.1 H/W Requirement 5
1.3.2 S/W Requirement 5
1.4 Concept and Definition 6-11
1.4.1 HTML 6
1.4.1.1 What Is HTML 6
1.4.1.2 Simple Example of HTML 6
1.4.1.3 Description of HTML Example 7
1.4.1.5 HTML Version 8
1.4.1.6 Features of HTML 8
1.4.2 CSS 9
1.4.2.1 What Is CSS 9
1.4.2.2 What Does CSS Do 9
1.4.2.3 Why Use CSS 9
1.4.2.4 CSS Version 10
1.4.2.5 CSS Type 11
1.5 Conclusion 12
CHAPTER-2 13-28
2.1 Introduction 14
2.2 Data Flow Diagram 14
2.2.1 Rules for DFD 15
2.2.2 Zero Level DFD 16
2.2.3 One Level DFD 17
2.2.4 Second Level DFD 18
2.3 ER Diagram 19
2.4 Project Life Cycle 20
2.4.1 Stages of SDLC 21
2.4.2 Feasibility Study 21
2.4.2.1 Economic Feasibility 22
2.4.2.2 Technical Feasibility 22
2.4.2.3 Operation Feasibility 23
2.4.3 Testing 24
2.4.4 Types of Testing 24
2.4.4.1 Unit Testing 24
2.4.4.1.1 BBT 24
2.4.4.1.2 WBT 25
2.4.4.2 Integration Testing 26
2.4.4.3 System Testing 26
2.5 Conclusion 28
CHAPTER-3 29-40
3.1 Introduction 30
3.2 HTML Code 31
3.3 CSS Code 33
3.4 Screen Shot 35
3.5 Conclusion 39
3.6 Recommendation 39
3.7 Bibliography 40
CHAPTER – 1
INTRODUCTION
0
Chapter-1
1.1 INTRODUCTION:
1.1.1 INTRODUCTION:
All the schools and colleges are now moving towards the digital transformation, which
has helped industries like banking, manufacturing, commerce, and corporate streamline
increase their efficiency.
The digital transformation can help colleges in ways like saving the faculty’s time, storage
and analysis of the academic and administrative data, engaging students through digital
culture, improved communication, etc. It can be achieved in schools and colleges by
implementing a college automation system that can smoothen schools’ functioning and
colleges.
College management is becoming a very essential component in education in this

modern-day age. With the help of College Automation System, we can gather all the useful
information needed to the management in few clicks. College Automation System consists
of different modules such as student, faculty, admin etc. The interconnectivity among
modules reduces the time to perform different operational.
1.1.2 PURPOSE:
Our main purpose is to create a software which will manage the working of these
different modules. This document will form the basis for further design and development
activities on the project. The purpose of the college website is to let people know about this
college, their achievements as well as to interact with potential students as well as their
alumni.
1.1.3 AUDIENCE:
The audiences for this website will be people that are currently in college, potential
students, past students and any person who wants to know about college and its activities.
Broadly, they will be current students, faculty, alumni, unregistered users (includes potential
students).
1.1.4 SCOPE OF DOCUMENT:
This document will restrict itself to documenting all business requirements for college
website project. The document will also help in the design and development of the project.
The document will represent flow of the application. The scope of the project is to provide
a user-friendly college website.
1
Chapter-1
1.2 OVERVIEW AND SPECIFICATION:
1.2.1 DEFINITION:
A college automation system is an application that digitizes and streamlines the
operation of colleges and universities. The procedure varies from admission management
to class management to human resource management to finance management and many
more. It helps carry out the everyday chores online and helps manage admin, academic, and
non-academic activities.
In the college administration system, it will have functions for both the students and
management. It can manage the parent, teacher, and student’s life cycle and the financial,
academic, and admin activities.
1.2.2 SYSTEM OVERVIEW:

1.2.2.1 INTRODUCTION:
This website will have following aims:
 Help college to communicate with potential students by showcasing their facilities

and their faculty.
 Help users to access website and its privileges based on their roles.
 Attract and also inspire even more candidates to apply for your college.
1.2.2.2 MODULES:
Project will have following major modules:
 Home Page:
It will be start page for website. It will contain brief overview of News and upcoming
Events in college. They can be redirected to their individual pages if more information
is required by user. User can also register for events from these links.
 About Us
 Campus
 Labs
 Canteen
 Classrooms
 Playground
 Library
 Courses Offered:
It will contain details for specific courses that are available in the college.
 Under-graduation
 Post-graduation
 Management
 ITI
 Nursing
2
Chapter-1
 Extra Courses: These courses are apart from regular academics. They can be taken
by student as well as faculty.
 Contact Us
Will give an opportunity to registered users for providing feedback such as

suggestion or complaints that will be forwarded to administrator of website.
* Additional Modules based on roles:
1. Administrator (Admin):
a) Add/edit/delete courses
b) Add/edit/delete events
c) Add/edit/delete news
d) Add/edit/delete jobs
e) Add/edit/delete online library
f) Add/edit/delete exam schedule and results
g) Edit his/her profile
h) Administer content from feedback and from communicate with faculty module for
students
i) etc.
2. Student:
a) Sign up or renewal for extra courses
b) Communicate with faculty
c) Edit his/her profile
d) Feedback
3. Faculty:
a) Edit profile
b) Add/edit exam schedule and results
c) Feedback
d) Sign up or renewal for extra courses
4. General Secretary (from student):
Add/edit/delete events
3
Chapter-1
1.2.2.3 TYPES OF USERS:
 Administrator:
Site administrator has complete control of all the activities of the website. Site
admin can view as well as update jobs, events, communication, etc.
 Student:
Student is a part of any of courses in college and is currently studying in the
college. He/she can provide feedback or communicate with faculty and edit his/her
profile.
 Unregistered User:
Guest user is not a registered user. He/she can surf through the facilities of
college, news, register for events. But he cannot communicate with faculty and
provide feedback.
 Faculty
Faculty can register for course edit his/her profile, give feedback and add/edit
exam schedule and results.
 General Secretary (from student):

He/she is responsible for events at the college as a part of student body. So, he
can add/edit/delete events apart from getting student rights on website.
4
Chapter-1
1.3 REQUIREMENT SPECIFICATION:
1.3.1 H/W Requirement:
Device name: DELL-inspiration-15-3000
Processor: AMD Ryzen 5 3450U with Radeon Vega Mobile Gfx
Speed: 2.10 GHz
RAM: 8.00 GB
Internet connection: 512KBPS
Hard disk: 1TB
1.3.2 S/W Requirement:

Using the following software set, this carrier info site was developed.
Operating System: Windows 11
Front end: HTML, CSS
Web Browser: Google Chrome
Source code editor: Visual Studio Code
Ms-Word 2019
5
Chapter-1
1.4 CONCEPT AND DEFINITION:

1.4.1 HTML:
1.4.1.1 What is HTML:
HTML is an acronym which stands for Hyper Text Markup Language which is used for
creating web pages and web applications. Let's see what is meant by Hypertext Markup
Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with
each other.
Markup language: A markup language is a computer language that is used to apply layout
and formatting conventions to a text document. Markup language makes text more
interactive and dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by
a web browser. A web page can be identified by entering an URL. A Web page can be of the
static or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with
the help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content.
1.4.1.2 Simple Example of HTML:

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph. </p>
</body>
</html>
6
Chapter-1
1.4.1.3 Description of HTML Example:
<!DOCTYPE>: It defines the document type or it instruct the browser about the version
of HTML.
<html >: This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
<head>: It should be the first element inside the <html> element, which contains the
metadata (information about the document). It must be closed before the body tag
opens.
<title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and should
close immediately. (Optional)
<body>: Text between body tag describes the body content of the page that is visible
to the end user. This tag contains the main content of the HTML document.
<h1>: Text between <h1> tag describes the first level heading of the webpage.
<p>: Text between <p> tag describes the paragraph of the webpage.
1.4.1.4 Brief History of HTML:

In the late 1980's, a physicist, Tim Berners-Lee who was a contractor at CERN,
proposed a system for CERN researchers. In 1989, he wrote a memo proposing an
internet-based hypertext system.
Tim Berners-Lee is known as the father of HTML. The first available description of
HTML was a document called "HTML Tags" proposed by Tim in late 1991. The latest
version of HTML is HTML5, which we will learn later in this tutorial.
7
Chapter-1
1.4.1.5 HTML Versions:
Since the time HTML was invented, there are lots of HTML versions in market, the
brief introduction about the HTML version is given below:
HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.
HTML 2.0: This was the next version which was released in 1995, and it was
standard language version for website design. HTML 2.0 was able to support extra
features such as form-based file upload, form elements such as text box, option button,
etc.
HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements. It
can also support a web page with complex mathematical equations. It became an
official standard for any browser till January 1997. Today it is practically supported by
most of the browsers.
HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very
stable version of HTML language. This version is the current official standard, and it
provides added support for stylesheets (CSS) and scripting ability for various multimedia
elements.
HTML5: HTML5 is the newest version of HyperText Markup language. The first
draft of this version was announced in January 2008. There are two major organizations
one is W3C (World Wide Web Consortium), and another one is WHATWG (Web
Hypertext Application Technology Working Group) which are involved in the
development of HTML 5 version, and still, it is under development.
1.4.1.6 Features of HTML:

1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
3) It is a markup language, so it provides a flexible way to design web pages along with
the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows,
Linux, and Macintosh, etc.
6) HTML is a case-insensitive language, which means we can use tags either in lower-
case or upper-case.
8
Chapter-1
1.4.2 CSS:
1.4.2.1 What is CSS:
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to
describe the look and formatting of a document written in markup language. It provides
an additional feature to HTML. It is generally used with HTML to change the style of web
pages and user interfaces. It can also be used with any kind of XML documents including
plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces
for web applications and user interfaces for many mobile applications.
1.4.2.2 What does CSS do:
You can add new looks to your old HTML documents.

You can completely change the look of your website with only a few changes in CSS code.
1.4.2.3 Why use CSS:
These are the three major benefits of CSS:
1) Solves a big problem

Before CSS, tags like font, color, background style, element alignments, border and size
had to be repeated on every web page. This was a very long process. For example: If you
are developing a large website where fonts and color information are added on every
single page, it will be become a long and expensive process. CSS was created to solve this
problem. It was a W3C recommendation.
2) Saves a lot of time

CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.
3) Provide more attributes

CSS provides more detailed attributes than plain HTML to define the look and feel of
the website.
9
Chapter-1
1.4.2.4 CSS Versions:

1. CSS Level 1:
CSS Level 1 (CSS1) was officially released in 1996, and included properties for
adding font properties such as typeface and emphasis color of text, backgrounds, and
other elements Text attributes such as spacing between words, letters, and lines of text.
Unfortunately, lack of dependable web browser support prevented the popularity of CSS
Level 1 for several years.
2. CSS Level 2:
CSS level 2 (CSS2) specification was developed by the W3C and published as a
recommendation in 1998. Its most notably added properties for positioning that allowed
CSS to be used for page layout. It also introduced styles for other media types and more
sophisticated methods for selecting elements for styling.
3. CSS Level 3:
The earliest CSS level 3 (CSS3) drafts were published in 1999. CSS3 adds
presentation-style properties, allowing you to effectively build presentations from Web
documents. CSS level 3 is divided into several separate documents called modules. Due
to the modularization, different modules have different stability and statuses.
4. CSS Level 4:
There is no single CSS4 specification and there is no standard which named as CSS4.
But a few levels 4 modules exist such as Image Values, Backgrounds & Borders, or
Selectors etc., which build on the functionality of a preceding level 3 module. The level 4
modules can collectively be referred to as CSS level 4. There is only CSS standard, and
each module can level up independently.
10
Chapter-1
1.4.2.5 CSS Types:

There are three types of CSS which are given below:
1.Inline CSS
2.Internal or Embedded CSS
3.External CSS
1.Inline CSS: Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag using
the style attribute. We are going to write the style with in the tag itself.
2.Internal CSS or Embedded CSS: Internal or Embedded CSS: This can be used when a
single HTML document must be styled uniquely. The CSS rule set should be within the
HTML file in the head section i.e., the CSS is embedded within the HTML file.
3.External CSS: External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, … etc). CSS property
written in a separate file with .css extension and should be linked to the HTML document
using link tag. This means that for each element, style can be set only once and that will
be applied across web pages.
11
Chapter-1
1.5 CONCLUSION:
From the above chapter we know about the basic feature about the project, what is the
problem definition, what are the concept and definition, advantages of the proposed system.
We also know what are the hardware & software are required for this project. Here we
discussed the different Modules to be described. We also know the tools and technologies
required to develop this project. We know about the HTML, CSS.
12
CHAPTER – 2
SYSTEM DESIGN
13
Chapter-2
2.1 INTRODUCTION:
System design includes context diagram, E R diagram, different level of data flow
diagram, data base tables and also software life cycle along with different types of testing.
This above experiment parts helps in developing the project easier and simpler.
2.2 DATA FLOW DIAGRAM:

A dataflow diagram is a graphical representation that depicts information flow. and
the transform that are applied as data move from input and output. The basic forms of a
Data Flow Diagram also move from known as a Data Flow Graph or a Bubble Chart.
Symbol Description
External A source of system inputs or sink of

entity system outputs.
Perform some transaction of input

Process
data to yield output data.
Used to connect processes to each other

to sources or sinks to. The arrow head
Data Flow indicates the direction of data flow.
A repository of data; the arrow

heads indicate net inputs and net
outputs to store
Data store
[Fig-2.1] Symbols of DFD
14
Chapter-2
2.2.1 RULES FOR DATA FLOW DIAGRAM:
1 Fix the scope of the system by means of context diagrams.
2 Organize the DFD so that the main sequence of the actions reads left to right and top to
bottom
3 Identify all inputs and outputs.
4 A process is required for all the data transformation and transfers. Therefore, never
connect a data store to a data source or the destinations or another data store with just a
data flow arrow.
5 Do not indicate hardware and ignore control information 6 Make sure the names of the
processes accurately convey everything the process is done.
7 There must not be unnamed process.
8 Indicate external sources and destinations of the data, with squares. 4 Number each
occurrence of repeated external entities.
10 Identify all data flows for each process step, except simple Record retrievals.
11 Label data flow on each arrow.
12 Use details flow on each arrow.
13 There can't be unnamed data flow.
14 A data flow can't connect two external entities.
15
Chapter-2
2.2.2 ZERO LEVEL DFD:
Course
management
System user Faculty Employee

management management
COLLEGE
AUTOMATION
SYSTEM
Faculty System user

management management
Login
Management
[Fig 2.2] Zero level DFD – College automation
16
Chapter-2
2.2.3 FIRST LEVEL DFD:
College Generate
management College Report
Classes Generate
management Classes Report
Students’ Generate
management Students Report
COLLEGE
AUTOMATION
SYSTEM
Courses Check
management Courses Report
Generate
Faculties
Courses Report
management
Registration Generate
management Registration
Report
[Fig 2.3] First level DFD – College automation
17
Chapter-2
2.2.4 SECOND LEVEL DFD:
Login Check
Admin to roles of
system Access
Forgot
Password Check Manage
Credentials Modules
Manage College Details
Manage Classes Details
Send Email Manage Students Details

to User
Manage Faculties Details
Manage Courses Details
Manage Semester
Report
Manage System Admin Manage Role of User Manage User permission
[Fig 2.4] Second level DFD – College automation
18
Chapter-2
2.3 ENTITY RELATIONSHIP DIAGRAM:
19
Chapter-2
2.4 PROJECT LIFE CYCLE:
The Software Development Life Cycle (SDLC) is the process by which software is created
Some companies don't have anything more than an ad hoc approach to software
development, but these environments still have an SDLC-it's just a bad one. Likewise, each
company that has a formal SDLC probably has its own, unique flavour of the SDLC Sometimes
the SDLC is a very complicated, detailed approach that requires a whole team of project
managers just to keep going. The lifecycle of a project may include the following steps:
Analysis
Design
[Fig 2.6] Project life cycle
By applying this simple set of definite steps and deliverables at the outset and relating this
to a transparent time and cost structure, we provide clients with an effective framework
against which to measure expectation, quality, progress and cost for their project.
In addition to providing the technical lifecycle framework, ISL also provide clients with a
simple step by step plan at the outset of their project, which details how each step is
initiated, what documents or details are required from the client to enable the activities to
be carried out and where feedback or confirmation is likely to be needed, to ensure that the
deliverables meet the need.
20
Chapter-2
2.4.1 STAGES OF SDLC:
Requirements
Design
Implementation
Verification
Maintenance
[Fig 2.7] Stages of Software Development Life Cycle
2.4.2 FEASIBILITY STUDY:
The aim of feasibility study is to determine whether developing the product is

financially and technically feasible. The feasibility study involves analysis of the problem
and collection of data which would be input to the system, the processing required to be
carried out on these data, the output data required to be produced by the system as well
as study of various constraints on the behaviour of the system. The collected data are
analysed to arrive at the following
1 An abstract definition of the problem.
2 Formulation of the different solution strategies.
3 Examination of alternatives solution strategies and their benefits, indicating resources

required, development, cost and time in respect of each of the alternative solutions.
21
Chapter-2
Feasibility study is broadly divided into the following types:
1. Economic Feasibility
2. Technical Feasibility
3. Operational Feasibility
2.4.2.1 ECONOMIC FEASIBILITY:
This is based on questions like "will the system provide benefits greater than the
costs?" The feasibility study presents intangible as well as tangible benefits in a formal way.
A relatively detailed analysis of the costs of both development and operations of various
alternatives is also presented.
The project is economically feasible in the following manner.
1. The preliminary investigation is done with an affordable cost.

2. The charges of hardware and software implemented in this project are less costly.
3. This project hopes no costly errors arise in near future.
4. This project uses HTML & CSS because it is widely used to create a webpage.
2.4.2.2 TECHNICAL FEASIBILITY:
This is based on questions like" can the proposed application be implemented with
existing equipment, software technology and available personnel" If the new technology
is required, what is the likelihood that it can be developed? Analysis of project risk relative
to technical feasibility includes not only whether the technology available on the market
but also its "state of the art” both in absolute terms and relative to company's current
technical specification.
The project "COLLEGE AUTOMATION" is technically feasible in the following manner:
1. The proposed system may require some additional technologies however

development is to done in such a manner that any kind of addition or alternation
can easily be implemented.
2. The proposed system can be expanded if desired
3. The proposed system provides guarantee in terms of accuracy, reliability, easy
access and data security.
22
Chapter-2
2.4.2.3 OPERATIONAL FEASIBILTY:
This is based on questions like "will the system be used if it is developed and
implemented? Will these be resistant from users that will undermine the possible
application benefits?" This analysis may invoke a subjective assessment of political and
managerial environment in which the system will be implemented. In general, the greater
the requirements for change in the user environment in which the system will be
installed, the greater the risk of implementation failure.
The project is operationally feasible in the following manner:
1. The proposed system would definitely be used if developed and implemented.

2. The proposed system has been designed based on analysing the requirements.
23
Chapter-2
2.4.3 TESTING:
TESTING OBJECTIVES
1. Testing is a process of executing a program with the intent of finding an error.
2. A good test case is one that has a probability of finding an as yet undiscovered error.
3. Testing is a critical element of quality assurance.
4. Represents the ultimate review of specification, design and coding.
5. Testing presents an interesting anomaly for the software engineer.
2.4.4 TYPES OF TESTING:

Software products are normally tested at the individual component (or unit level). This
is referred to as testing in the small. After testing components individually, the
components are slowly integrated and tested at each level of integration (integration
testing) finally then fully integrated system is tested (called system testing) Integration and
system testing are known as testing in the large.
Thus, a software product goes through following levels of testing:
1. Unit testing
2. Integration testing
3. System testing
2.4.4.1 UNIT TESTING:

Unit testing focuses verification effort on the smallest unit of design that is the
module. The unit test is normally white box testing oriented & the step can be conducted
in parallel for multiple modules. Here the divided modules can be individually tested
through the working of the functions mentioned.
2.4.4.1.1 BLACK BOX TESTING:
In black-box testing, test cases are designed from an examination of the input output
values only and no knowledge of design or code is required. The following are two main
approaches to design the black-box testing test cases.
 Equivalence class partitioning

 Boundary value analysis
24
Chapter-2
 Equivalence Class Partitioning:
In this approach, the domain of input values to a program is partitioned into a set of
equivalence classes. This partitioning is done such that the behaviour of the program is
similar every input data belonging to the same equivalence class. The main idea behind
defining the equivalence class is that testing the code with any one value belonging to an
equivalence class is as good as testing the software with any other value belonging to
that equivalence class Equivalence classes for software can be designed by examining
both input and the output data.
 Boundary Value Analysis:
A type of programming error frequently occurs in the boundaries of different

equivalence classes of inputs. The reason behind such errors might purely be due to
psychological factors. Programmers often fail to see the special processing required by
the input values that lie at the boundary of different equivalence classes. Boundary value
analysis leads to selection of test cases at the boundaries of different equivalence classes.
2.4.4.1.2 WHITE BOX TESTING:
White box testing sometimes called as glass box testing is a test case design method
that uses the control structures of the procedural design to derive test cases. Using white
box testing methods, the software engineer can derive test case that,
1. Guarantee that all independent paths with in a module have been exercised at
least once.
2. Exercise all logical decisions on their true and false sides.
3. Execute all loops at their boundaries and within their operational bounds.
4. Exercise internal data structures to ensure their validity.
5. Logic errors and incorrect assumptions are inversely proportional to the
probability that a program path will be executed.
Errors tend to creep into our work when we design and implement functions.
conditions are or control that are out of the mainstream. Everyday processing tends to be
well understood, while special case processing tends to fall into the cracks. We often
believe that a logical path is not executed when, in fact, it may be executed on a regular
basis. The logical flow of a program is sometimes counterintuitive, meaning that our
unconscious assumptions about flow of control and data may lead us to make design errors
that are uncovered only once path testing commences.
25
Chapter-2
2.4.4.2 INTEGARTION TESTING:

The primary object of integration testing is to test the module interfaces in order to
ensure that there are no errors in the parameter passing, when one module invokes
another module. During testing, different modules of a system are integrated in a planned
manner using an integration plan. The integration plan specifies the steps and the order in
which are combined to realize the full system. After each integrated step, the partially
integrated system is tested. Anyone (or a mixture) of the following approaches can be used
to develop the test plan.
1. Big-bang approach:
It is the simplest integration testing approach, where all the modules making up a
system are integrated in a single step.
2. Top-down approach:
Top-down integration testing starts with the main routine and one or two
subordinate routines in the system After the top-level skeleton' has been tested, the
immediate subroutines of the skeleton' are combined with it and tested.
3. Bottom-up approach:
In bottom-up testing, each subsystem is tested separately and then the full system
is tested. A subsystem might consist of many modules which communicate among each
other through well-defined interfaces.
4. Mixed approach:
A mixed (also called sandwiched) integration testing follows a combination of top

down and bottom-up testing approaches. Systems tests are designed to validate a fully
developed system to assure that it meets its requirements. There are essentially three
main kind of system testing.
2.4.4.3 SYSTEM TESTING:
1. Alpha testing:
Alpha testing refers to the system testing carried out by the test team within the
developing organization Beta testing Beta testing is the system testing performed by a
select group of friendly customers.
26
Chapter-2
2. Acceptance testing:
Acceptance testing is the system testing performed by the customer to determine

whether to accept or reject the delivery of the system.
3. Performance testing:
Performance testing is carried out to check whether the system meets the non-
functional requirements identified in the SRS document. There are several types of
performance testing as discussed below. The type of performance testing to be carried
out on a system depends on the different non-functional requirements of the system
documented in the SRS document. All performance tests can be considered as black-box
tests.
4. Stress testing:
Stress testing evaluates system performance when it is stressed for short periods of
time. Stress tests are black-box tests which are designed to impose a range of abnormal
and even illegal input conditions so as to stress the capabilities of the software.
5. Volume testing:
It is especially important to check whether the data structures (arrays, queues,

stacks, etc.) have been designed successfully for extra ordinary situations. For example,
a compiler might be tested to check whether the symbol table overflows when a very
large program is compiled.
6. Configuration testing:
Configuration tasting is used to analyse system behaviour in various hardware and

software configurations specified in the requirements. Sometimes systems are built in
variable configurations for different users.
7. Usability testing:
This testing pertains to check the user interface to see if it meets all the user
requirements. During usability testing, the display screens, messages, report formats,
and other aspects relating to the user interface requirements are tested.
27
Chapter-2
2.5 CONCLUSION:
In this chapter we study about the data flow diagram, entity relationship diagram,
software life cycle with software development life cycle. This chapter gives enormous
idea about the entire project.
28
CHAPTER – 3
CODING AND CONCLUSION
29
Chapter-3
3.1 INTRODUCTION:
In this chapter we analyse about the sample coding, reference, recommendation and
screen shot. Bibliography provides the source of design and knowledge of coding for the
website. Coding of HTML and CSS in a source code editor like Vs code. Recommendation
provides somethings is good or suitable for a particular purpose or job. Screen shot
provides pictorial description of different pages of website.
30
Chapter-3
3.2 HTML Code:

It is HTML code and it written in a source code editor i.e., Visual studio code. The
HTML source code is saved in index.html file. The HTML files are saved in .html and .htm
extension.
<html>
<head>
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<title>COLLEGE AUTOMATION</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap"
rel="stylesheet">
</head>
<body>
<section class="header">
<nav>
<img src="Nabapravat logo.jpeg" width="100" height="100">
<div class="navbar">
<ul>
<li><a href="">HOME</a></li>
<li><a href="about.html.html">ABOUT</a></li>
<li><a href="course.html.html">COURSES</a></li>
<li><a href="Facilities.html.html">FACILITIES</a></li>
<li><a href="contact.html.html">CONTACT US</a></li>
</ul>
</div>
</nav>
<div class="text-box">
<h1>NABAPRAVAT ACADEMY FOR MANAGEMENT EDUCATION</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam, labore?Lorem
ipsum dolor sit amet,consectetur adipisicing elit.<br> Nihil aperiam quidem itaque iure dolorum
harum cumque, illum namreiciendis? Asperiores?</p>
<a href=" " class="btn">Visit Us To Know More</a>
</div>
</section>


<section class="course">
<h1>Courses We Offer</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, aut?</p>
<div class="row">
<div class="course-col">
<h3>Management</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo eaexercitationem,
veniam corporis iure minus beatae adipisci quod.</p>
</div>
<h3>Under Graduation</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo ea exercitationem,
veniam corporis eosiure minus beatae adipisci quod.</p>
</div>
<h3>Post Graduation</h3>
</div>
<h3>ITI</h3>
31
Chapter-3
</div>
<h3>Nursing</h3>
veniam corporis eoiure minus beatae adipisci quod.</p>
</div>
</div>
</section>


<section class="facilities">
<h1>Our Facilities</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum possimus quasi ullam beatae
illo obcaecati!</p>
<div class="row">
<div class="classroom">
<img src="istockphoto-1277829589-612x612.jpg">
<div class="layer">
<h2>Our Smart Class Room</h2>
</div>
</div>
<div class="library">
<img src="library.png">
<div class="layer">
<h2>World Class Library</h2>
</div>
</div>
<div class="lab">
<div class="layer">
<h2>Lab</h2>
</div>
</div>
</div>
<div class="row">
<div class="hostel">
<div class="layer">
<h2>Hostel For Boys & Girls</h2>
</div>
</div>
<div class="Canteen">
<div class="layer">
<h2>Canteen</h2>
</div>
</div>
<div class="playground">
<div class="layer">
<h2>Big Play Ground</h2>
</div>
</div>
</div>
</section>
32
Chapter-3
<section class="testimonials">
<h1>What Our Student Says</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="row">
<div class="testimonials-cols">
<img src="DSC_0914.JPG">
<div class="star">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas illo dicta
veniam laboriosam error molestiae aperiam harum laborum necessitatibus natus?</p>
<h3>Chita Ranjan Behera</h3>
<img src="star.jpg">
<img src="halfstar.jpg">
</div>
</div>
<div class="testimonials-cols">
<img src="DSC_0944.JPG">
<div class="star">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas illo dicta
veniam laboriosam error molestiae aperiam harum laborum necessitatibus natus?</p>
<h3>Raghunath Sahoo</h3>
</div>
</div>
</div>
</section>


<section class="cta">
<h1>Enroll for Our Various Online Courses <br> Anywhere From The World</h1>
<a href="" class="btn">CONTACT US</a>
</section>


<section class="footer">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum eum repellat maxime
labore possimus reiciendis minima omnis itaque numquam ut?</p>
<div class="icons">
<img src="th.jpg">
<img src="instagram.jpg">
<img src="linkedin.png">
<img src="twitter.png">
<p>Made with <img src="love.jpg"> By Trilochan, Chita, Prasant, Rama, Sunil</p>
<p>Thanks for visit our website.</p>
</div>
</section>
</body>
</html>
33
Chapter-3
3.3 CSS Code:

It is external style sheets named as Style.css. It linked in the HTML file with the <link> tag.
It also be written in source code editor like Vs code. Its extension is .css.
* {
margin: 0;
padding: 0;
font-family: 'Baloo Bhai 2', cursive;
}
.header {
min-height: 100vh;
width: 100%;
background-image: url("DSC_0941.JPG");
background-position: center;
background-size: cover;
opacity: 1.5;
}
nav img {
padding-left: 10px;
padding-top: 8px;
}
nav {
padding-left: 33px;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
flex: 1;
padding-left: 110px;
padding-top: 95px;
}
.navbar ul li {
list-style: none;
display: inline-block;
padding: 10px 10px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: white;
font-size: 15px;
font-weight: bold;
}
.navbar ul li::after {
content: "";
width: 0%;
height: 5px;
background: red;
display: block;
margin: auto;
transition: 0.5s;
}
34
Chapter-3
.navbar ul li:hover::after {
width: 100%;
}
.text-box {
width: 90%;
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
color: rgba(4 135 238 / 99%);
font-size: 36px;
}
.text-box p {
color: rgb(238 240 244 / 99%);
margin: 49px 0 4px;
font-size: 17px;
}
.btn {
display: inline-block;
text-decoration: none;
color: red;
border: 1.5px solid #f57f17;
border-radius: 10px;
padding: 12px 30px;
font-size: 20px;
font-weight: bold;
background: transparent;
position: relative;
cursor: pointer;
}
.btn:hover {
border: 1.5px solid #c44040;
background: #aa1a1a;
color: white;
transition: 1s;
}
/* courses */
.course {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
h1 {
color: rgb(3 4 86 / 99%);
font-size: 36px;
font-weight: bold;
}
35
Chapter-3
p {
font-size: 14px;
font-weight: 200;
line-height: 22px;
padding: 10px;
}
.row {
margin-top: 5%;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.course-col {
flex-basis: 30%;
background: #eec3c3ba;
margin-bottom: 5%;
padding: 20px 12px;
box-sizing: border-box;
transition: 0.5s;
}
h3 {
color: #1d2f8f;
text-align: center;
font-weight: 800;
margin: 10px 0px;
}
.course-col:hover {
box-shadow: 0 0 20px 0px;
}
/* Facilities */
.facilities {
width: 80%;
margin: auto;
text-align: center;
}
.facilities h1 {
margin-top: 30px;
}
.classroom {
flex-basis: 32%;
margin-bottom: 30px;
position: relative;
overflow: hidden;
.classroom img {
width: 100%;
height: 300px;
display: block;
}
36
Chapter-3
.layer {
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: 0.5s;
}
.layer h2 {
color: #1d2f8f;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
transition: 0.5s;
opacity: 0;
}
.layer:hover {
background: rgba(231, 159, 159, 0.7);
}
.library {
flex-basis: 32%;
position: relative;
overflow: hidden;
}
.library img {
width: 100%;
height: 300px;
}
.hostel {
flex-basis: 32%;
position: relative;
overflow: hidden;
}
.hostel img {
width: 100%;
height: 300px;
}
.layer:hover h2 {
bottom: 49%;
opacity: 1;
}
.lab {
flex-basis: 32%;
position: relative;
overflow: hidden;
}
37
Chapter-3
.lab img {
width: 100%;
height: 300px;
display: block;
}
.Playground {
flex-basis: 32%;
position: relative;
overflow: hidden;
}
.Playground img {
width: 100%;
height: 300px;
}
.Canteen {
flex-basis: 32%;
position: relative;
overflow: hidden;
}
.Canteen img {
width: 100%;
height: 300px;
}
.testimonials {
width: 80%;
margin: auto;
text-align: center;
padding-top: 100px;
}
.testimonials-cols {
flex-basis: 44%;
margin-bottom: 5%;
text-align: left;
background: #eec3c3ba;
cursor: pointer;
display: flex;
}
.testimonials-cols img {
padding: 10px;
height: 68px;
width: 87px;
margin-left: 8px;
border-radius: 50%;
}
.testimonials-cols p {
padding: 10;
}
38
Chapter-3
.testimonials-cols h3 {
margin-top: 15px;
text-align: left;
}
.star img {
padding: 0px;
height: 20px;
width: 20px;
}
/* call to action */
.cta {
margin: 100px auto;
width: 80%;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(banner2.jpg);
text-align: center;
padding: 100px 0;
}
.cta h1 {
color: #fff;
padding: 0;
}
.footer {
width: 100%;
text-align: center;
padding: 30px;
}
.footer h4 {
font-weight: 600;
margin-top: 20px;
}
.icons img {
width: 30px;
height: 30px;
cursor: pointer;
color: red;
}
p img {
padding-top: 20px;
height: 20px;
width: 20px;
}
.fa-solid {
color: #f44336;
}
39
Chapter-3
.sub-header {
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
url("background.jpg");
text-align: center;
}
.sub-header h1 {
margin-top: 100px;
color: white;
}
.about-us {
width: 80%;
margin: auto;
padding-top: 80px;
padding-bottom: 50px;
}
.about-cols {
flex-basis: 48%;
padding: 30px 2px;
.about-cols img {
width: 100%;
}
.about-cols h1 {
padding-top: 0;
}
.about-cols {
padding: 15px 0 25px;
}
.location {
width: 80%;
margin: auto;
padding: 80px 0;
}
.location iframe {
width: 100%;
}
40
Chapter-3
3.4 SCREEN SHOTS:

3.4.1 HOME PAGE:
[Fig-3.1] HOME PAGE-1
41
Chapter-3
42
Chapter-3
43
Chapter-3
3.4.2 ABOUT PAGE:
[Fig-3.7] ABOUT PAGE-1
[Fig-3.8] ABOUT PAGE-2
44
Chapter-3
3.4.2 COURSES PAGE:
[Fig-3.9] COURSE PAGE-1
[Fig-3.10] COURSE PAGE-2
45
Chapter-3
3.4.3 FACILITIES PAGE:
[Fig-3.11] FACILITIES PAGE-1
46
Chapter-3
3.4.4 CONTACT PAGE:
[Fig-3.14] CONTACT PAGE-1
47
Chapter-3
48
Chapter-3
3.5 CONCLUSION:
In today's Web development, a good page design is essential. A bad design will lead to
the loss of visitors and that can lead to a loss of business. In general, a good page layout has
to satisfy the basic elements of a good page design. This includes color contrast, text
organization, font selection, style of a page, page size, graphics used, and consistency. In order
to create a well-designed page for a specific audience. The developer needs to organized and
analyse the users' statistics and the background of the users. Although it can be hard to come
up with a design that is well suited to all of the users, there will be a design that is appropriate
for most of the audience. The better the page design, the more hits a page will get. That
implies an increase in accessibility and a possible increase in business.
The project is based on a final project on web page designing in really knowledgeable
project for all the college students. HTML is necessary for rising issues of audiences, purpose,
design, and accessibility. HTML need to be a barrier to learning and writing, that is possible to
use HTML to address writing issues.
3.6 RECOMMENDATION:
After analysing all the researched information and feedback from different users, I would
recommend that a general purposed Web site should use non-frame pages and graphics
navigation bar with rollover effects. In addition to the graphic navigation bar with rollover
effects, each page should also have a text-only navigation bar for easy control. The developer
should also create a Cascading Style Sheet to control the font and font-size and use the style
sheet throughout the site to obtain a consistent look and feel.
49
Chapter-3
3.7 BIBLIOGRAPHY:
I have done this project with the help of my friends, Guide lecture and my parents.
I have taken help from the following:
1. Youtube.com (CodeWithHarry, Easy Tutorials)
2. Google Chrome (W3Schools, geeksforgeeks, Javatpoint, Tutorialspoint, etc)
3. Google.com
4. Wikipedia.com
5. Slideshare.net
6. Visual Studio Code, etc.
for finalizing this project.
Thank you……
50
2.3 E-R Diagram
c.name C.add C.code
College a.type
Have Handel
1 1
1 a.name
M
M 1
Library a.id
Administrative
M 1
l.code
Guide d.id
Manage
Have Have
19
M M d.name
Staff Department
M
M M d.email
s.phno
Guide Have
c.name
h.type
M Study Guide M
h.name c.id
Hostel Courses
h.add Admit c.type
M M
s.rollno Lives f.name

Takes
s.branch M M
M M M
Chapter-2
Student Teach
Faculty
s.name f.sub

CONTENTS Page - Merged

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CONTENTS Page - Merged

Uploaded by

Copyright:

Available Formats

CONTENTS

College management is becoming a very essential component in education in this

1.1.4 SCOPE OF DOCUMENT:

1.2.2 SYSTEM OVERVIEW:

 Help college to communicate with potential students by showcasing their facilities

Will give an opportunity to registered users for providing feedback such as

* Additional Modules based on roles:

e) Add/edit/delete online library

f) Add/edit/delete exam schedule and results

g) Edit his/her profile

a) Sign up or renewal for extra courses

b) Communicate with faculty

c) Edit his/her profile

b) Add/edit exam schedule and results

d) Sign up or renewal for extra courses

4. General Secretary (from student):

 General Secretary (from student):

Processor: AMD Ryzen 5 3450U with Radeon Vega Mobile Gfx

Speed: 2.10 GHz

Internet connection: 512KBPS

Hard disk: 1TB

1.3.2 S/W Requirement:

Operating System: Windows 11

Front end: HTML, CSS

Web Browser: Google Chrome

Source code editor: Visual Studio Code

1.4 CONCEPT AND DEFINITION:

1.4.1.2 Simple Example of HTML:

1.4.1.4 Brief History of HTML:

1.4.1.6 Features of HTML:

1.4.2.2 What does CSS do:

You can add new looks to your old HTML documents.

1.4.2.3 Why use CSS:

These are the three major benefits of CSS:

1) Solves a big problem

2) Saves a lot of time

3) Provide more attributes

1.4.2.4 CSS Versions:

1.4.2.5 CSS Types:

2.2 DATA FLOW DIAGRAM:

External A source of system inputs or sink of

Perform some transaction of input

Used to connect processes to each other

A repository of data; the arrow

[Fig-2.1] Symbols of DFD

1 Fix the scope of the system by means of context diagrams.

3 Identify all inputs and outputs.

7 There must not be unnamed process.

11 Label data flow on each arrow.

12 Use details flow on each arrow.

13 There can't be unnamed data flow.

14 A data flow can't connect two external entities.

2.2.2 ZERO LEVEL DFD:

System user Faculty Employee

Faculty System user

[Fig 2.2] Zero level DFD – College automation

2.2.3 FIRST LEVEL DFD:

[Fig 2.3] First level DFD – College automation

2.2.4 SECOND LEVEL DFD:

Manage College Details

Manage Classes Details

Send Email Manage Students Details

Manage Faculties Details