Library is the place where we find a huge amount of books from different authors starting from poem, textbooks and competitive books can be easily found in the library . Handling huge of amount of books is quite bigger tasks. Keeping the record of books and placing them according to the relevance in quite difficult but to solve the problem of management their comes a software which help in the management of the library.
Library Management System Project
Let’s look at the process of how we can create a library management system using HTML,CSS (bootstrap) and Javascript. We will simplify the process so that everyone can understand all the concepts easily.
1. HTML Structure:
To begin, let us create the HTML structure of our library management system. We’ll create an entry for the book within our project and have sections where we add the book data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Free Library System">
<meta name="keywords" content="Library System, Book System">
<meta name="author" content="Codeblogger">
<title>Library System</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!-- Pages -->
<link rel="stylesheet" href="/CSS/main.css">
<link rel="stylesheet" href="/CSS/book_list.css">
<link rel="stylesheet" href="/CSS/insertion_section.css">
<script src="/JS/main.js"></script>
</head>
<body>
<section id="one-page">
<div class="container">
<!-- Title -->
<div class="row">
<h1 class="text-light">Library System</h1>
</div>
<div class="row mt-4">
<!-- insertion section -->
<div class="col-lg-5" id="insertion_section">
<form class="form-group justify-content-center">
<div class="row" id="name-section">
<label for="bookName" class="text-light">Name</label>
<input type="text" class="form-control" id="bookName">
</div>
<div class="row" id="author-section">
<label for="authorName" class="text-light">Author</label>
<input type="text" class="form-control" id="authorName">
</div>
<div class="row" id="publisher-section">
<label for="publisherName" class="text-light">Publisher</label>
<input type="text" class="form-control" id="publisherName">
</div>
<div class="row" id="two-section">
<div class="col-6">
<label for="numberPage" class="text-light">Number of pages</label>
<input type="number" class="form-control" id="numberPage">
</div>
<div class="col-6">
<label for="serialNumber" class="text-light">Serial Number</label>
<input type="number" class="form-control" id="serialNumber">
</div>
</div>
<div class="add-button mt-4">
<button type="button" class="btn btn-danger btn-block" id="add" >ADD</button>
</div>
</from>
</div>
<!-- Book List -->
<div class="col-lg-7" id="book_list">
<table class="table table-borderless table-striped mt-3 ">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Author</th>
<th scope="col">Publisher</th>
<th scope="col">Page</th>
<th scope="col">Serial</th>
<th></th>
</tr>
</thead>
<tbody id="tabs">
<tr class="tab">
<th scope="row">The Hunger Games</th>
<td>Suzanne Collins</td>
<td>Alfa</td>
<td>478</td>
<td>1</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Harry Potter</th>
<td>J.K. Rowling</td>
<td>Beta</td>
<td>398</td>
<td>2</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">To Kill a Mockingbird</th>
<td>Harper Lee </td>
<td>Omega</td>
<td>685</td>
<td>3</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Pride and Prejudice</th>
<td>Jane Austen</td>
<td>Sky</td>
<td>425</td>
<td>4</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Twilight</th>
<td>Stephenie Meyer</td>
<td>Sun</td>
<td>556</td>
<td>5</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">The Book Thief</th>
<td>Markus Zusak</td>
<td>Child</td>
<td>475</td>
<td>6</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Narnia</th>
<td>C.S. Lewis</td>
<td>Alfa</td>
<td>358</td>
<td>7</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Animal Farm</th>
<td>George Orwell</td>
<td>Dog</td>
<td>277</td>
<td>8</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Les Misérables</th>
<td>Victor Hugo</td>
<td>Dog</td>
<td>369</td>
<td>9</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">The Alchemist</th>
<td>Paulo Coelho</td>
<td>Omega</td>
<td>247</td>
<td>10</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">The Help</th>
<td>Kathryn Stockett</td>
<td>Clock</td>
<td>159</td>
<td>11</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Charlotte's Web</th>
<td>E.B. White</td>
<td>Book</td>
<td>437</td>
<td>12</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Dracula</th>
<td>Bram Stoker</td>
<td>Beta</td>
<td>346</td>
<td>13</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
</body>
</html>Adding Links:
We will be creating the structure for our library management project . But before that we need to add some important links inside our HTML file
We will be adding the import link for the bootstrap framework and also we have used some icons inside our project so we will be adding the importing link of fontawesome icons.
<title>Library System</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!-- Pages -->
<link rel="stylesheet" href="/CSS/main.css">
<link rel="stylesheet" href="/CSS/book_list.css">
<link rel="stylesheet" href="/CSS/insertion_section.css">
<script src="/JS/main.js"></script>Adding Structure:
We will create our library management system section-wise. First, we will create a section using the section tag with the id “one-page.” Inside the section tag, we will create a containment for our library management structure using the div tag with class container. Inside that, using the <h1> tag selector, we will add the heading for the library system project.
We are going to create an insertion section with a form that will help in entering the book data with different parameters using the bootstrap classes. We’ll create a form with the tag, the form tag, and the label class “Name, author, publisher, and serial number.” To receive various data from the book for maintaining entries in our system, we will develop different form elements.
<section id="one-page">
<div class="container">
<!-- Title -->
<div class="row">
<h1 class="text-light">Library System</h1>
</div>
<div class="row mt-4">
<!-- insertion section -->
<div class="col-lg-5" id="insertion_section">
<form class="form-group justify-content-center">
<div class="row" id="name-section">
<label for="bookName" class="text-light">Name</label>
<input type="text" class="form-control" id="bookName">
</div>
<div class="row" id="author-section">
<label for="authorName" class="text-light">Author</label>
<input type="text" class="form-control" id="authorName">
</div>
<div class="row" id="publisher-section">
<label for="publisherName" class="text-light">Publisher</label>
<input type="text" class="form-control" id="publisherName">
</div>
<div class="row" id="two-section">
<div class="col-6">
<label for="numberPage" class="text-light">Number of pages</label>
<input type="number" class="form-control" id="numberPage">
</div>
<div class="col-6">
<label for="serialNumber" class="text-light">Serial Number</label>
<input type="number" class="form-control" id="serialNumber">
</div>
</div>
<div class="add-button mt-4">
<button type="button" class="btn btn-danger btn-block" id="add" >ADD</button>
</div>
</from>
</div>
<!-- Book List -->
<div class="col-lg-7" id="book_list">
<table class="table table-borderless table-striped mt-3 ">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Author</th>
<th scope="col">Publisher</th>
<th scope="col">Page</th>
<th scope="col">Serial</th>
<th></th>
</tr>
</thead>
<tbody id="tabs">
<tr class="tab">
<th scope="row">The Hunger Games</th>
<td>Suzanne Collins</td>
<td>Alfa</td>
<td>478</td>
<td>1</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Harry Potter</th>
<td>J.K. Rowling</td>
<td>Beta</td>
<td>398</td>
<td>2</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">To Kill a Mockingbird</th>
<td>Harper Lee </td>
<td>Omega</td>
<td>685</td>
<td>3</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Pride and Prejudice</th>
<td>Jane Austen</td>
<td>Sky</td>
<td>425</td>
<td>4</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Twilight</th>
<td>Stephenie Meyer</td>
<td>Sun</td>
<td>556</td>
<td>5</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">The Book Thief</th>
<td>Markus Zusak</td>
<td>Child</td>
<td>475</td>
<td>6</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Narnia</th>
<td>C.S. Lewis</td>
<td>Alfa</td>
<td>358</td>
<td>7</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Animal Farm</th>
<td>George Orwell</td>
<td>Dog</td>
<td>277</td>
<td>8</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Les Misérables</th>
<td>Victor Hugo</td>
<td>Dog</td>
<td>369</td>
<td>9</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">The Alchemist</th>
<td>Paulo Coelho</td>
<td>Omega</td>
<td>247</td>
<td>10</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">The Help</th>
<td>Kathryn Stockett</td>
<td>Clock</td>
<td>159</td>
<td>11</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Charlotte's Web</th>
<td>E.B. White</td>
<td>Book</td>
<td>437</td>
<td>12</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
<tr class="tab">
<th scope="row">Dracula</th>
<td>Bram Stoker</td>
<td>Beta</td>
<td>346</td>
<td>13</td>
<td>
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Let’s look at the structure of our library management system.
Output:
2. Styling Structure:
1. Adding Basic styling:
The id selector will be used to set the width property to 385 pixels, the height to 92.5%, and the background color to #book_list. We will also use the left property to provide a 25-pixel-left gap. Utilizing the border-radius property, we will add a 7.5 pixel border radius to create a soft edge.
The table tag property will be used to add a black backdrop, and the font color property will be used to create a white font.
#book_list{
background: rgba(0,0,0,.75);
width: 92.5%;
height: 385px;
left: 25px;
overflow-y: scroll;
border-radius: 7.5px;
&::-webkit-scrollbar {
display: none;
}
table{
background: rgba(256,256,256,.75);
border-radius: 7.5px;
thead{
color: #1a1a1a;
}
tbody{
color: #262626;
}
}
}
#insertion_section{
background: rgba(0,0,0,.75);
border-radius: 7.5px;
padding: 15px 10px 15px 10px;
width: 100%;
.form-group{
width: 90%;
margin-left: 10%;
input,label{
width: 90%;
}
input{
opacity: .20;
transition: .5s;
outline: none;
}
#two-section{
margin-left: -7.5%;
input{
width: 85%;
}
}
button{
margin-left: -5%;
}
}
}
body{
padding: 0;
margin: 0;
height: 100vh;
}
2. Styling Library System:
We will align the container position with respect to the body margin and padding after adding a background image using the URL and the id selector attribute.
Our webpage is now more responsive thanks to our usage of the media query selector. We will establish the maximum width of the screen using the max width property, and if the screen size drops below that value, the size of the library management components will be automatically adjusted.
#one-page{
height: 100%;
background-image: url("https://cdn.wallpapersafari.com/91/90/Bmhy8U.jpg");
background-size: auto;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto ;
}
.container{
position: relative;
top: 15%;
}
h1{
font-size: 50px;
}
@media (max-width: 976px){
#one-page{
height: 150%;
background-image: url("https://cdn.wallpapersafari.com/91/90/Bmhy8U.jpg");
background-size: auto;
-webkit-background-size: auto;
-moz-background-size: auto;
-o-background-size: auto ;
}
}Styling Output:
3. Adding Functionality:
We have used the jQuery framework to give a best user experience to library managment system.
$(document).ready(function(){
// insertion_section
$("input").focus(function() {
$(this).css("opacity",1)
})
$("input").blur(function() {
$(this).css("opacity",.2)
})
// close tr event
$(".close").click(function(){
$(this).parents(".tab").hide(500)
})
// add book info
$("#add").click(function(){
let book_name = $("#bookName").val(),
book_author = $("#authorName").val(),
book_publisher = $("#publisherName").val(),
book_number = $("#numberPage").val(),
book_serial = $("#serialNumber").val(),
new_tr = document.createElement("tr"),
new_th_book_name = document.createElement("th"),
new_th_book_author = document.createElement("td"),
new_th_book_publisher = document.createElement("td"),
new_th_book_page = document.createElement("td"),
new_th_book_serial = document.createElement("td"),
table_book_name = document.createTextNode(book_name),
table_book_author = document.createTextNode(book_author),
table_book_publisher = document.createTextNode(book_publisher),
table_book_number = document.createTextNode(book_number),
table_book_serial = document.createTextNode(book_serial);
// add txt
new_th_book_name.appendChild(table_book_name);
new_th_book_author.appendChild(table_book_author);
new_th_book_publisher.appendChild(table_book_publisher);
new_th_book_page.appendChild(table_book_number);
new_th_book_serial.appendChild(table_book_serial);
// add new_tr --> td
let name_tab = new_tr.appendChild(new_th_book_name);
let author_tab = new_tr.appendChild(new_th_book_author);
let publisher_tab = new_tr.appendChild(new_th_book_publisher);
let page_tab = new_tr.appendChild(new_th_book_page);
let serial_tab = new_tr.appendChild(new_th_book_serial);
new_th_book_name.setAttribute("scope","row")
// add new_tr --> table
let new_table = document.getElementById("tabs");
new_table.appendChild(new_tr);
new_tr.setAttribute("class","tab");
// close button
let but_td = document.createElement("td"),
but = document.createElement("button"),
but_span = document.createElement("span"),
span_txt = document.createTextNode("X");
but_td.appendChild(but);
but.appendChild(but_span);
but_span.appendChild(span_txt);
new_tr.appendChild(but_td);
but.setAttribute("type","button");
but.setAttribute("class","close");
but.setAttribute("aria-label","Close");
but_span.setAttribute("aria-hidden","true");
// click --> form reset
this.form.reset();
// close form item
$(".close").click(function(){
$(this).parents(".tab").hide(500)
})
})
})
1. Input focus and blur effect:
ADVERTISEMENT
Now to add the blur property to our library management project we will create a function called focus and inside it using the CSS opacity property we will set the visiblilty as 1 and then using the blur function we will set the blur opacity as 0.2
ADVERTISEMENT
$("input").focus(function() {
$(this).css("opacity",1);
})
$("input").blur(function() {
$(this).css("opacity",.2);
})
2. Close Button Event:
ADVERTISEMENT
It handles the click event on elements with the class “close.” When a close button is clicked, it finds the closest ancestor with the class “tab” and hides it with a 500-ms fade-out effect. This is commonly used to visually remove or hide a specific item, in this case, a book entry.
ADVERTISEMENT
$(".close").click(function(){
$(this).parents(".tab").hide(500);
})
3. Add Book Information:
ADVERTISEMENT
Using the add.clickfunction we will create different variable that will include the book name, book author, book publisher, book_serial and similarly we will create the different variables selecting the HTML elements. It then dynamically creates new HTML elements (<tr>,<th>,<td>, <button> etc.) and appends them to the table with the ID “tabs.” The form is reset to clear the input fields, and a close button is added to the new book entry.
$("#add").click(function(){
let book_name = $("#bookName").val(),
book_author = $("#authorName").val(),
book_publisher = $("#publisherName").val(),
book_number = $("#numberPage").val(),
book_serial = $("#serialNumber").val(),
new_tr = document.createElement("tr"),
new_th_book_name = document.createElement("th"),
new_th_book_author = document.createElement("td"),
new_th_book_publisher = document.createElement("td"),
new_th_book_page = document.createElement("td"),
new_th_book_serial = document.createElement("td"),
table_book_name = document.createTextNode(book_name),
table_book_author = document.createTextNode(book_author),
table_book_publisher = document.createTextNode(book_publisher),
table_book_number = document.createTextNode(book_number),
table_book_serial = document.createTextNode(book_serial);
// add txt
new_th_book_name.appendChild(table_book_name);
new_th_book_author.appendChild(table_book_author);
new_th_book_publisher.appendChild(table_book_publisher);
new_th_book_page.appendChild(table_book_number);
new_th_book_serial.appendChild(table_book_serial);
// add new_tr --> td
let name_tab = new_tr.appendChild(new_th_book_name);
let author_tab = new_tr.appendChild(new_th_book_author);
let publisher_tab = new_tr.appendChild(new_th_book_publisher);
let page_tab = new_tr.appendChild(new_th_book_page);
let serial_tab = new_tr.appendChild(new_th_book_serial);
new_th_book_name.setAttribute("scope","row")
// add new_tr --> table
let new_table = document.getElementById("tabs");
new_table.appendChild(new_tr);
new_tr.setAttribute("class","tab");
// close button
let but_td = document.createElement("td"),
but = document.createElement("button"),
but_span = document.createElement("span"),
span_txt = document.createTextNode("X");
but_td.appendChild(but);
but.appendChild(but_span);
but_span.appendChild(span_txt);
new_tr.appendChild(but_td);
but.setAttribute("type","button");
but.setAttribute("class","close");
but.setAttribute("aria-label","Close");
but_span.setAttribute("aria-hidden","true");
// click --> form reset
this.form.reset();
// close form item
$(".close").click(function(){
$(this).parents(".tab").hide(500)
})
})
})
Conclusion:
Now We have Successfully provided you with the project that every developer should practice while mastering for the frontend You can use this project directly by copying it into your IDE. We hope you understood the project, If you have any doubts feel free to comment!!
If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Follow: CodewithRandom
Author: Arun
