Ca Project File

CHAPTER 1
INTRODUCTION
1.1 PROBLEM STATEMENT
PROBLEM STATEMENT: The problem occurred before having computerized system includes:
 File lost
When computerized system is not implemented file is always lost because of human environment.
Some times due to some human error there may be a loss of records.
 File damaged
When a computerized system is not there file is always lost due to some accident like spilling of water
by some member on file accidentally. Besides some natural disaster like floods or fires may also
damage the files.
 Difficult to search record
When there is no computerized system there is always a difficulty in searching of records if the
records are large in number .
 Space consuming
After the number of records become large the space for physical storage of file and records also
increases if no computerized system is implemented.
 Cost consuming
As there is no computerized system the to add each record paper will be needed which will increase the
cost for the management of library.
1
1.2PROPOSED SOLUTION
 Improvement in control and performance
The system is developed to cope up with the current issues and problems of library .The system can
add user, validate user and is also bug free.
 Save cost
After computerized system is implemented less human force will be required to maintain the library
thus reducing the overall cost.
 Save time
Librarian is able to search record by using few clicks of mouse and few search keywords thus saving
his valuable time
PROJECT AIMS AND OBJECTIVES
The project aims and objectives that will be achieved after completion of this project are
discussed in this subchapter. The aims and objectives are as follows:
 Online book issue
 Request column for librarian for providing new books
 A separate column for digital library.
 A search column to search availability of books .
 Online notice board about the workshop.
2
CHAPTER 2
DESCRIPTION
SYSTEM SPECIFICATION
2.1 SOFTWARE REQUIREMENT SPECIFICATION
2.1.1 GENERAL DESCRIPTION
PRODUCT DESCRIPTION: Library Management System is a computerized system which helps

user(librarian) to manage the library daily activity in electronic format. It reduces the risk of paper
work such as file lost, file damaged and time consuming. It can help user to manage the transaction or
record more effectively and time- saving.
2.1.1 HARDWARE REQUIREMENT
 Intel core i5 2nd generation is used as a processor because it is fast than other processors an
provide reliable and stable and we can run our pc for longtime. By using this processor we can
keep on developing our project without any worries.
 Ram 1 gb is used as it will provide fast reading and writing capabilities and will in turn support
in processing.
2.1.2 SOFTWARE REQUIREMENT
This section describes the software and hardware requirements of the system SOFTWARE
REQUIREMENTS
 Operating system- Windows 7 is used as the operating system as it is stable and supports more
features and is more user friendly
 Development tools and Programming language- HTML is used to write the whole code and
develop webpages with css, java script for styling work and php for sever side scripting.
3
OPERATION ENVIRONMENT
PROCESSOR INTEL CORE PROCESSOR OR BETTER

PERFORMANCE
OPERATING SYSTEM WINDOWS7
MEMORY 1GB RAM OR MORE
HARD DISK SPACE MINIMUM 3 GB FOR DATABASE USAGE FOR

FUTURE
4
TOOLS AND TECHNOLOGIES USED
2.3 SOFTWARE TOOLS USED
. 2.3.1 Front end : The front end is designed using of html,css
HTML(HYPERTEXT MARKUP LANGUAGE)
 HTML- HTML or Hyper Text Markup Language is the main markup language for creating web
pages and other information that can be displayed in a web browser.HTML is written in the form of
HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page
content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags
represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start
tag, and the second tag is the end tag (they are also called opening tags and closing tags). In
between these tags web designers can add text, further tags, comments and other types of text-
based content. The purpose of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML tags, but uses the tags to
interpret the content of the page.HTML elements form the building blocks of all websites. HTML
allows images and objects to be embedded and can be used to create interactive forms. It provides a
means to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as
JavaScript which affect the behavior of HTML web pages.
 Hypertext Markup Language (HTML) is the standard markup language for creating web
pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of
cornerstone technologies for the World Wide Web.
 Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.
 HTML elements are the building blocks of HTML pages. With HTML constructs, images and other
objects such as interactive forms may be embedded into the rendered page. HTML provides a
means to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written
5
using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page.
Other tags such as <p> surround and provide information about document text and may include
other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the
content of the page.
 HTML can embed programs written in a scripting language such as JavaScript, which affects the
behavior and content of web pages. Inclusion of CSS defines the look and layout of content.
The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards,
has encouraged the use of CSS over explicit presentational HTML since 1997.
6
CSS(Cascading Style Sheets)
 CSS- Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language. While most often used to style web pages
and interfaces written in HTML and XHTML, the language can be applied to any kind of XML
document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web and
almost all web pages use CSS style sheets to describe their presentation.CSS is designed primarily
to enable the separation of document content from document presentation, including elements such
as the layout, colors, and fonts. This separation can improve content accessibility, provide more
flexibility and control in the specification of presentation characteristics, enable multiple pages to
share formatting, and reduce complexity and repetition in the structural content (such as by
allowing for table less web design).CSS can also allow the same markup page to be presented in
different styles for different rendering methods, such as on-screen, in print, by voice (when read out
by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be
used to allow the web page to display differently depending on the screen size or device on which it
is being viewed. While the author of a document typically links that document to a CSS file,
readers can use a different style sheet, perhaps one on their own computer, to override the one the
author has specified. However if the author or the reader did not link the document to a specific
style sheet the default style of the browser will be applied.CSS specifies a priority scheme to
determine which style rules apply if more than one rule matches against a particular element. In
this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results
are predictable.
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display
for different devices and screen sizes.
7
PROJECT PLANNING:
.
Enrolment No. Name Job To Be Done
60461101716 RISHABH GARG SYSTEM ANALYSIS/CODING
44461101716 YASHASVI SHARMA CODING/ DESIGNING
8
CHAPTER-3
SYSTEM CODING AND IMPLMENTATION
SCREEN SHOT OF HOME PAGE
1.CODING FOR HOME PAGE
<!DOCTYPE html>
<html>
<head>
<style>
ul {
9
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
li {
float: left;
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
li a:hover {
background-color: #111;
img {
10
border-radius: 8px;
</style>
</head>
<body style=" background-color : lightgrey">
<marquee direction = "left"> <h1 class="display-4"><center> Delhi School of Professional Studies

and Research </center></h1> </marquee>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="AboutUs.html">About Us</a></li>
<li><a href="AboutCollege.html">About College</a></li>
<li><a href="Egallery.html">E-Gallery</a></li>
<li><a href="Searchbook.html">Search Book</a></li>
<li><a href="Issuebook.html">Issue Book</a></li>
<li><a href="Returnbook.html">Return Book</a></li>
<li><a href="ContactUs.html">Contact Us</a></li>
<li><a href="StudentLogin.html">Student Login</a></li>
<li><a href="TeacherLogin.html">Teacher Login</a></li>
</ul>
<p>
<img src="https://www.dspsr.in/images/newlogo.png" alt="Par" style="float : left; margin-left : 40px;

margin-top : 40px " width="500" height="500">
11
<img src="C:\Users\om1\Desktop\library-management-system-500x500.jpg" alt="Paris" width="500"
height="500" style="float : right; margin-right : 40px; margin-top : 40px ">
</body>
</html>
SCREEN SHOT OF ABOUT US
2.CODING FOR ABOUT US
<html>
<head> <title> About Us </title>
</head>
<style>
p{
12
font-size : 20px;
margin-left: 50px;
margin-right: 50px
h1{
font-size: 30px;
</style>
<body style="background-color:rgba(255, 99, 71, 0.5);">
<h1><center> <u> <b>About Us </b> </u> </center></h1>
<p>
Colleges may not look much like it did few years back. With the increasing advancement of cutting-
edge technologies such as cloud, mobile,
digital and analytics has transformed the way libraries offer many services. College and university
libraries are making headway, despite
the rising challenges and expectations of today’s students.
</p>
<p>
1. Simple & Easy to Use

13
The Library Management Software is simple, user-friendly, and can be easily integrated with your
existing system.
The library management system provides online and offline storage, automated backups, and easy
upgrades to simplify and enhance learning process.
</p>
<p>
2. Increased Library Engagement
Avoid frustration and tediousness by providing students with 24/7 access to library resources from
anywhere, anytime.
Library Management Software allows librarian to maintain all types of books, eBooks, journals,
photos, videos, and create events.
</p>
<p>
3. Highly Secure, Scalable & Reliable
College libraries benefit from scalable infrastructure, role-based secure access, high performance and
reliable to ensure seamless access to library database.
</p>
<p>
4. Mobile Access
14
The library management system provides mobile access to search the library catalog, schedules, books
and resources from anywhere,
at any given time via smartphones and tablets.
</p>
<p>
5. Dynamic Reports
Maximize the performance of libraries with dynamic reports, charts and graphs to review and track the
progress for better decision-making.
</p>
<p>
6. Error-free
The automated library software is user-friendly, powerful and developed for easy entry of data, makes
library operations free from errors.
</p>
<p>
7. Fully Customizable
The library automation system is fully customizable and adaptable to the needs of educational
institutions to provide fast, reliable data.
</p>
<p>
8. Cost-effective
Embracing sophisticated technologies is cost-effective and a viable choice for education institutions.
Using cloud, mobile and digital libraries eliminates paper-based processes and maintenance overheads,
improves productivity, reduces operation costs and saves time.
15
</p>
</p>
</body>
</html>
SCREEN SHOT OF ABOUT COLLEGE
3.CODING FOR ABOUT COLLEGE
<!DOCTYPE html>
<html>
<head>
<title> About College </title>
<style>
16
img {
border-radius: 8px;
</style>
</head>
<body style=" background-color : lightseagreen ">
<h1><center> About DSPSR </center></h1>
<img src="C:\Users\om1\Desktop\dspsr.png" alt="Paris" width="500" height="300" style=" margin-

left : 400px">
<br>
<h2> Rankings </h2>
<p>
<ul>
<li>Ranked top 15 in India\'s Power B-School by ICMR-4P B&M B-School Survey 2012 </li>
<li>Ranked A++ among top 10 B-School in Curriculum & top 10 B-School Delhi and NCR by
Business & Management Chronicle January 2012. </li>
<li>Ranked Top 21 Self Financed B-School of North India as per Bhaskar Lakshya ranking published
in September 2011. </li>
<li>Ranked 16 among Best B-Schools of India as per Business and Management Chronicle, February
2011. </li>
<li>Ranked 7 in Upcoming Top B- Schools as Per Business & Economy, December 2010 issue. </li>
<li>Ranked 6 in New Emerging Potential & Promising B-Schools in all over India as per CSR-
GHRDC rankings published in Competition Success Review, November 2010 issue.
17
</li>
<li>Ranked top 8 in Promising Top B- Schools, conducted by GHRDC, published in CSR Nov. 2009
issue. </li>
<li>Awarded A++ Rank (Excellent B-School) in North India by Business Sphere for year 2008-09.
</li>
<li>Post Graduate Diploma in Management program at DSPSR program has been designed by the
Industry, for the Industry. The key objective of this program is to create
\"Industry Ready\"professionals who are capable of immediate productive contribution to their

organization. While students from conventional education struggle
for acceptance in the highly competitive market, we ensure the domain knowledge and applicable
skills set acquired by our PGDM students at DSPSR has relevance
to industry requirements. </li>
<li>60+ Placement Partners </li>
<li>DSPSR has entered into a strategic alliance with over 60+ national and International companies for
providing them talented ready-to-deploy human resources. </li>
</p>
</body>
</html>
18
SCREEN SHOT OF E- GALLERY
4.CODING FOR E- GALLERY
<html>
<head> <title> E-Gallery </title>
</head>
<body style="background-color:rgb(106, 90, 205);">
<h1 class="display-4"><center> <u>E-Gallery</u> </center></h1>
<img src="C:\Users\om1\Desktop\images\img1.jpg" alt="Paris" style=" float : left; margin-left: 40px "

height="400" width="500">
19
<img src="C:\Users\om1\Desktop\images\img2.jpg" alt="Pariss" style=" float : right; margin-right:
40px " height="400" width="500">
<img src="C:\Users\om1\Desktop\images\img3.jpg" alt="P" style=" float : left; margin-left: 40px "

<img src="C:\Users\om1\Desktop\images\img4.jpg" alt="Pa" style=" float : right; margin-right: 40px "

<img src="C:\Users\om1\Desktop\images\img5.jpg" alt="Par" style=" float : left; margin-left: 40px "

<img src="C:\Users\om1\Desktop\images\img7.jpg" alt="Parisss" style=" float : right; margin-right:

<img src="C:\Users\om1\Desktop\images\img8.jpg" alt="Pari" style=" float : left; margin-left: 40px "

</body>
</html>
20
SCREEN SHOT OF SEARCH BOOK
5.CODING FOR SEARCH BOOK
<html>
<head> <title> Search Book </title>
</head>
<style>
input[type=text] {
21
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
input[type=text]:focus {
width: 100%;
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
22
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
</style>
<body style=" background-color : lightblue">
<h1 class="display-4"><center> Search Book </center></h1>
<form>
<input type="text" name="search" placeholder="Search..">
<input type="submit" class="button" placeholder="Submit">
</form>
<img src="C:\Users\om1\Desktop\financial-management.jpg" alt="Paris" style=" float : left; margin-

left: 40px " height="400" width="300">
23
<img src="C:\Users\om1\Desktop\MIS.jpg" alt="Paris" style=" float : left; margin-left: 40px "
<img src="C:\Users\om1\Desktop\values.jpg" alt="Paris" style=" float : left; margin-left: 40px "

<img src="C:\Users\om1\Desktop\production-and-operations-management.jpg" alt="Paris" style="

float : left; margin-left: 40px " height="400" width="300">
<img src="C:\Users\om1\Desktop\sales_management.jpg" alt="Paris" style=" float : left; margin-left:

<img src="C:\Users\om1\Desktop\mahi1.jpg" alt="Paris" style=" float : left; margin-left: 40px "






24



</body>
</html>
SCREEN SHOT OF ISSUE BOOK
25
6.CODING FOR ISSUE BOOK
<html>
<head> <title> Issue Book </title>
<style>
*{
div>
<div class="col-75">
<input type="text" id=input[type=text], select, textarea {
width: 100%;
26
padding: 12px;
border-radius: 4px;
resize: vertical;
label {
padding: 12px 12px 12px 0;
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
input[type=submit]:hover {
27
background-color: #45a049;
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
/* Clear floats after the columns */
.row:after {
28
content: "";
display: table;
clear: both;
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of
each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
</style>
</head>
<body style=" background-color : lightgrey">
<h1 class="display-4"><center> Issue Book </center></h1>
<div class="container">
<form action="/action_page.php">
<div class="row">
<label for="fname">Book Name</label>
</div>
29
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<label for="lname">Course</label>
</"lname" name="lastname" placeholder="Your course name..">
</div>
<input type="text" id="fname" name="firstname" placeholder="Your course name..">
</div>
</div>
<div class="row">
<label for="country">Year</label>
</div>
<select id="country" name="country">
<option value="australia">First</option>
<option value="canada">Second</option>
<option value="usa">Third</option>
</select>
30
</div>
</div>
<div class="row">
<label for="subject">Date of issue</label>
</div>
<textarea id="subject" name="subject" placeholder="Write something about book.."

style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
SCREEN SHOT OF RETURN BOOK
31
7.CODING FOR RETURN BOOK
<html>
<head> <title> Return Book </title>
</head>
<style>
*{
div>
<input type="text" id=input[type=text], select, textarea {
32
width: 100%;
padding: 12px;
border-radius: 4px;
resize: vertical;
label {
padding: 12px 12px 12px 0;
input[type=submit] {
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
33
input[type=submit]:hover {
background-color: #45a049;
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
34
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of
each other instead of next to each other */
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
</style>
<body style=" background-color : pink">
<h1 class="display-4"><center> Return Book </center></h1>
35
<form action="/action_page.php">
<div class="row">
<label for="fname">Book Name</label>
</div>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<label for="lname">Course</label>
</"lname" name="lastname" placeholder="Your course name..">
</div>
<input type="text" id="fname" name="firstname" placeholder="Your course name..">
</div>
</div>
<div class="row">
<label for="country">Year</label>
</div>
36
<select id="country" name="country">
<option value="australia">First</option>
<option value="canada">Second</option>
<option value="usa">Third</option>
</select>
</div>
</div>
<div class="row">
<label for="subject">Date of issue</label>
</div>
<textarea id="subject" name="subject" placeholder="Write something about book.."

style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
37
</body>
</html>
SCREEN SHOT OF CONTACT US
38
8.CODING FOR CONTACT US
<html>
<head> <title> Contact Us </title>
</head>
<style>
p{
font-size : 20px;
margin-left: 50px;
margin-right: 50px
h1{
font-size: 30px;
</style>
<body style="background-color:rgba(255, 99, 71, 0.5);">
<h1><center> <u> <b>Contact Us </b> </u> </center></h1>
<h3> Address : </h3> Maharaja Agarsen Chowk, Sector -22, Rohini, Delhi - 110086. <br>
<h3> Phone Number : </h3> 011-27582078 <br>
<h3> Mobile : </h3> +91-8448186947 <br>
<h3> Email : <h3> maimsrohini@yahoo.co.in <br>
39
<h3> Website : </h3> www.maims.ac.in <br>
</body>
</html>
SCREEN SHOT OF STUDENT LOGIN
40
9.CODING FOR STUDENT LOG IN
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
/* Set a style for all buttons */
button {
41
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
button:hover {
opacity: 0.8;
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
.container {
42
padding: 16px;
span.psw {
float: right;
padding-top: 16px;
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
43
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
.close:hover,
.close:focus {
color: red;
44
cursor: pointer;
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
/* Change styles for span and cancel button on extra small screens */
span.psw {
45
display: block;
float: none;
.cancelbtn {
width: 100%;
</style>
</head>
<body style=" background-color : lightblue; ">
<h2>Student Login Form</h2>
<button onclick="document.getElementById('id01').style.display='block'"
style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close

Modal">×</span>
</div>
46
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'"

class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');

47
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
</script>
</body>
</html>
SCREEN SHOT OF TEACHER LOGIN
48
10.CODING FOR TEACHER LOG IN
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
/* Set a style for all buttons */
button {
49
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
button:hover {
opacity: 0.8;
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
.container {
50
padding: 16px;
span.psw {
float: right;
padding-top: 16px;
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
51
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
.close:hover,
.close:focus {
color: red;
52
cursor: pointer;
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
/* Change styles for span and cancel button on extra small screens */
span.psw {
53
display: block;
float: none;
.cancelbtn {
width: 100%;
</style>
</head>
<body style=" background-color : lightgrey; ">
<h2>Teacher Login Form</h2>
<button onclick="document.getElementById('id01').style.display='block'"
style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close

Modal">×</span>
</div>
54
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'"

class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</div>
<script>
55
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
</script>
</body>
</html>
56
CHAPTER 4
CONCLUSION AND REFERENCES
CONCLUSION
This website provides a computerized version of library management system which will benefit
the students as well as the staff of the library. It makes entire process online where student can
search books, view different books in stock and view functionalities.
The books are divided into different categories based on semesters. User can view these books and
their covers. E-gallery page enables user to view different sections and physical surface of library.
User can learn more about the system by this.
About Us tells user about the advantages and needs of the system. It is important to use such
system nowadays and paperwork decreases and information flow becomes easy.
The Teacher Login and Student Login pages are designed to give user login facility where they
can login using there credentials.
LIMITATIONS
 Library management system have a very large library that will be difficult to update.
 If software is corrupted , whole data will be collapsed.
 Copyright problem of books.
 The System do not produce library card.
57
FUTURE SCOPE
 There is a future scope of this facility that many more features such as online lectures video
tutorials can be added by teachers.
 Online assignments submission facility can be added.
 A feature of group chat where students can discuss various issues of engineering can be added
to this project.
 Project can be made more interactive more user friendly.
 A notice board can be added which tells user about the new books in stock and current affairs
and information.
 A fine facility can be added which fines users after submitting a book late.
58
BIBLIOGRAPGHY / REFERENCES
1. http://www.w3schools.com/html/html_intro.asp
2. http://www.w3schools.com/css/css_background.asp
 Google
 www.maims.ac.in
 The Truth About HTML5 by Luke Stevens
 Beginning CSS Web Development by Simon Colison
59

Ca Project File

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ca Project File

Încărcat de

Drepturi de autor:

Formate disponibile

CHAPTER 1

1.1 PROBLEM STATEMENT

 Difficult to search record

 Improvement in control and performance

PROJECT AIMS AND OBJECTIVES

2.1 SOFTWARE REQUIREMENT SPECIFICATION

2.1.1 GENERAL DESCRIPTION

PRODUCT DESCRIPTION: Library Management System is a computerized system which helps

2.1.1 HARDWARE REQUIREMENT

2.1.2 SOFTWARE REQUIREMENT

PROCESSOR INTEL CORE PROCESSOR OR BETTER

OPERATING SYSTEM WINDOWS7

MEMORY 1GB RAM OR MORE

HARD DISK SPACE MINIMUM 3 GB FOR DATABASE USAGE FOR

2.3 SOFTWARE TOOLS USED

. 2.3.1 Front end : The front end is designed using of html,css

HTML(HYPERTEXT MARKUP LANGUAGE)

Why Use CSS?

SYSTEM CODING AND IMPLMENTATION

SCREEN SHOT OF HOME PAGE

1.CODING FOR HOME PAGE

padding: 14px 16px;

<body style=" background-color : lightgrey">

<marquee direction = "left"> <h1 class="display-4"><center> Delhi School of Professional Studies

<li><a class="active" href="#home">Home</a></li>

<li><a href="AboutUs.html">About Us</a></li>

<li><a href="AboutCollege.html">About College</a></li>

<li><a href="Searchbook.html">Search Book</a></li>

<li><a href="Issuebook.html">Issue Book</a></li>

<li><a href="Returnbook.html">Return Book</a></li>

<li><a href="ContactUs.html">Contact Us</a></li>

<li><a href="StudentLogin.html">Student Login</a></li>

<li><a href="TeacherLogin.html">Teacher Login</a></li>

<img src="https://www.dspsr.in/images/newlogo.png" alt="Par" style="float : left; margin-left : 40px;

SCREEN SHOT OF ABOUT US

2.CODING FOR ABOUT US

<head> <title> About Us </title>

<body style="background-color:rgba(255, 99, 71, 0.5);">

<h1><center> <u> <b>About Us </b> </u> </center></h1>

the rising challenges and expectations of today’s students.

1. Simple & Easy to Use

2. Increased Library Engagement

3. Highly Secure, Scalable & Reliable

at any given time via smartphones and tablets.

SCREEN SHOT OF ABOUT COLLEGE

3.CODING FOR ABOUT COLLEGE

<title> About College </title>

<body style=" background-color : lightseagreen ">

<h1><center> About DSPSR </center></h1>

<img src="C:\Users\om1\Desktop\dspsr.png" alt="Paris" width="500" height="300" style=" margin-

<h2> Rankings </h2>

\"Industry Ready\"professionals who are capable of immediate productive contribution to their

to industry requirements. </li>

<li>60+ Placement Partners </li>

4.CODING FOR E- GALLERY

<head> <title> E-Gallery </title>

<body style="background-color:rgb(106, 90, 205);">

<h1 class="display-4"><center> <u>E-Gallery</u> </center></h1>

<img src="C:\Users\om1\Desktop\images\img1.jpg" alt="Paris" style=" float : left; margin-left: 40px "

<img src="C:\Users\om1\Desktop\images\img3.jpg" alt="P" style=" float : left; margin-left: 40px "

<img src="C:\Users\om1\Desktop\images\img4.jpg" alt="Pa" style=" float : right; margin-right: 40px "

<img src="C:\Users\om1\Desktop\images\img5.jpg" alt="Par" style=" float : left; margin-left: 40px "

<img src="C:\Users\om1\Desktop\images\img7.jpg" alt="Parisss" style=" float : right; margin-right: