MICROPROJECT REPORT ON

“Online Book Shopping website”

IN PARTIAL FULFILMENT OF DIPLOMA IN COMPUTER ENGINEERING

(Fifth Semester)
In the Subject of
Client Side Scripting Language
(22519)
Submitted By

Manav S. Kuril (2201320323)

Mansi S. Kuril (2201320324)
Sneha S. Tumaskar (2201320325)
Tejaswini N. Dhawane (2201320332)

Submitted To

Maharashtra State Board of Technical Education, Mumbai(M.S)

Under the Guidance of

Mr P.U.Malve

Lecturer in Department of Computer Engineering Government Polytechnic Arvi,

Dist.Wardha (2024-2025)

Government Polytechnic Arvi ~1

 Government Polytechnic , Arvi.
Department of Computer Engineering

Certificate
This is to certify, that students whose name mention below of Fifth Semester
of Diploma in Computer Engineering has satisfactorily completed the
Microproject entitled “Online Book Shopping website” in Client Side
Scripting Language or the academic year 2024-25 as Prescribed in MSBTE
curriculum.

Name Enrollment No Seat No

Manav Kuril 2201320323
Mansi Kuril 2201320324
Sneha Tumaskar 2201320325
Tejaswini Dhawane 2201320332

Subject Teacher Head of the Department Principal

Mr. P.U.Malve Dr.M.A.Ali Dr.M.A.Ali

Place: Arvi
Date:

Government Polytechnic Arvi ~2

 Declaration

We under signed hereby declare that the micro project report entitled “
Develop a website on lab management”. We further declare that contents of
this report are properly citied and well acknowledge. This present report is
not submitted to any other examination of this or any other institute for the
award of any diploma.

(Signature)

Place: Arvi
Date:

Part A – MicroProject Proposal

Government Polytechnic Arvi ~3
 “Online Book Shopping website”

1. Brief Introduction:

An online book shopping website provides a convenient platform for users to

browse, search, and purchase books from various genres and categories. The
website typically includes features like a catalog that displays book titles,
authors, prices, and covers, allowing users to explore different options. With
search and filter capabilities, users can easily narrow down their choices based
on specific criteria, such as genre, author, or price range. Book details pages
give users more information about each title, helping them make informed
purchasing decisions.

In addition to browsing, users can manage their selections through a shopping

cart, where they can add, remove, or adjust quantities of books before finalizing
their purchase. Some online book shopping websites also offer user
authentication, allowing customers to create accounts and save their shopping
preferences. The client-side scripting involved in these sites enables a
responsive and interactive experience, ensuring the website works well across
various devices and provides a seamless shopping experience.

2. Aim of the Project:

The aim of this microproject is to create an online book shopping website using
client- side scripting to provide a user-friendly platform for browsing,
searching, and purchasing books. By utilizing HTML, CSS, and JavaScript, the
project will showcase essential features like a book catalog, search filters, and a
shopping cart, with a focus on responsive design for accessibility across
different devices.

3. Intended Course Outcomes:

CO(a).Create interactive web pages using program flow control structure.

CO(c).Create event based web forms using JavaScript.
CO(d).Create interactive webpage using regular expressions for validations.

Government Polytechnic Arvi ~4

 4. Proposed Methodology:

The methodology includes the following steps:

1. Requirement Planning:

- Identify key features like a book catalog, search options, and a shopping cart,
while assigning tasks to each group member.
- Develop a timeline for project milestones to ensure timely completion of tasks.

2. Design:

- Create wireframes for the layout, emphasizing clear navigation and user-
friendly elements.
- Design the visual aspects using CSS, ensuring responsiveness across different
devices.

3. Development:

- Use HTML to structure the website components, including the catalog and
shopping cart.
- Implement CSS for styling and JavaScript for interactivity, enabling features like
book filtering and cart management.

4. Testing and Debugging:

- Test the website across various browsers and devices to ensure

functionality and responsiveness.
- Debug any issues that arise, focusing on layout consistency and the smooth
operation of interactive features.

Government Polytechnic Arvi ~5

 5. Resources Required:

Sr. Name of Specifications Quantity Remarks

No. Resource

Computer i5
1 Computer ,RAM=8GB,SSD=512GB
System Windows 10, 8th gen 1

2 Operating
system Windows 10 1

3 Software Notepad++,VS-Code 1

Any other As
4 resources used Browser : Google Chrome required

5. Group Members:

Sr. No. Student Name Signature

54. Manav Kuril

55. Mansi Kuril

56. Sneha Tumaskar

62. Tejaswini Dhawane

Government Polytechnic Arvi ~6

 7. ActionPlan: -

Planned Team
Sr.No Details of Activity Planned
start Members
finish
date
date
To discuss and get the
All
1 topic ofmicro project.
Start planning on topic
All
2 ofmicroproject.
Collect information
3 All
about ourtopic.
Distribute works within
All
4 groupmembers.
To start with creating
5 with maincopy of All
microproject.
Collect different
information about
6 All
microproject.
Initiate different views
7 All
aboutmicro project.
Editing process must be
done before hard copy. All
8
Check soft copy properly
9 beforepreparing of hard All
copy.

10 To start creating copy All

properly.
Checking the information
11 frommonitor. All

12 Check the soft copy. All

To present soft copy
13 via G-mail. All

14 Represented the hard copy

All
of mainmicroproject.

Government Polytechnic Arvi ~7

 Part B – MicroProject Report

1. Rationale: -

The rationale for this project is based on the need for an efficient and user-
friendly platform to facilitate the online purchasing of books. With the rise of e-
commerce, consumers increasingly prefer the convenience of shopping from
home, making it essential to provide a seamless online experience. Traditional
methods of purchasing books, such as visiting physical stores or relying on
outdated websites, can be time- consuming and may not offer the same variety
or accessibility. This project aims to address these challenges by creating an
online book shopping website using HTML, CSS, and JavaScript.

The proposed platform will enhance user experience by allowing customers to

easily browse, search, and filter books, minimizing the time spent finding
desired titles.
Additionally, it will provide features such as a shopping cart and user account
management, ensuring a smooth purchasing process. By streamlining the
online book shopping experience, this project will meet the growing demand
for accessible and efficient book purchasing solutions, ultimately making it
easier for readers to discover and acquire books that interest them.

2. Intended Course Outcomes:-

CO(a).Create interactive web pages using program flow control structure.

CO(c).Create event based web forms using JavaScript.
CO(d).Create interactive webpage using regular expressions for validations.

Government Polytechnic Arvi ~8

 3. Literature Review:-

The rise of online shopping, particularly in the book sector, has transformed
consumer habits in recent years. Research by Nielsen Norman Group (2020)
underscores the significance of user experience (UX) and intuitive design in e-
commerce platforms, indicating that a well-structured website can enhance
customer satisfaction and loyalty. Our project aims to create an elegant and
user-friendly website that captivates customers with the following features:

1. Effective Search and Filtering Options:

Users will be empowered to effortlessly discover books by genre,
author, or publication date, enriching their shopping experience and making
browsing enjoyable.

2. User Reviews and Ratings:

Incorporating user-generated feedback will provide valuable insights
and foster a sense of community among readers, helping customers make
informed purchasing decisions.

3. Personalized Book Recommendations:

Based on user preferences and browsing history, our website will
offer tailored suggestions, enhancing engagement and encouraging additional
purchases.

Moreover, integrating a shopping cart and user account management is

crucial for facilitating a seamless purchasing process. As highlighted by
Pappas (2016), a thoughtfully designed shopping cart can significantly
minimize cart abandonment rates, making the checkout experience
straightforward and hassle-free. With the increasing use of mobile devices for
shopping, ensuring our website is responsive will further enhance
accessibility for all users. By emphasizing these features, our online book
shopping website aspires to be a sophisticated and inviting platform for book
enthusiasts, offering a delightful and convenient shopping experience.

Government Polytechnic Arvi ~9

 4. Code:-

Login Page :
<html>
<head>
<title>Login Page</title>
</head>
<body bgcolor="#f4f4f4">

<center>
<h1 style="color: white; background-color: #5d8aa8; padding: 10px;">Book Website Login</h1>

<table border="2" cellpadding="20" cellspacing="0" style="border-radius: 10px; border-color:

#5d8aa8;">
<tr>
<td>
<h2>Login</h2>
Username:<br>
<input type="text" id="username" placeholder="Enter your username" size="30"><br><br>

Password:<br>
<input type="password" id="password" placeholder="Enter your password"
size="30"><br><br>

<input type="button" value="Login" onclick="login()">

</td>
</tr>
</table>
</center>

<script>
function login()
{
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

if (username.trim() === '' || password.trim() === '')

{
alert('Please enter both username and password.');
return;
}

window.location.href = 'searchBook.html';
}
</script>
</body>
</html>

Government Polytechnic Arvi ~ 10

Search Book :
<html>
<head>
<title>Search Books</title>
</head>
<body bgcolor="#f4f4f4">

<center>
<h1 style="color: white; background-color: #5d8aa8; padding: 10px;">Search Books</h1>

<h2>Search for a Book</h2>

<input type="text" id="searchQuery" placeholder="Enter book name" size="30">
<input type="button" value="Search" onclick="searchBook()"><br><br>

<div id="suggestions" style="display: none; background-color: #e0e0e0; padding: 5px; border-radius:

5px; margin-top: 5px;">
<p><b>Last Search</b> <span id="lastSearch"></span></p>
</div><br>

<div style="text-align: center;">

<div class="book-card" style="padding: 20px; display: inline-block;">
<img src="C:\Users\user\Pictures\Saved Pictures\JavaScript Essentials.jpg" height="200"
width="150"><br>
<h3>JavaScript Essentials</h3>
<p>Author: Paul MC-Federies</p>
</div>

<div class="book-card" style="padding: 20px; display: inline-block;">

<img src="C:\Users\user\Pictures\Saved Pictures\HTML & CSS Basics.webp" height="200"
width="150"><br>
<h3>HTML & CSS Basics</h3>
<p>Author: Kailash Chandra Upadhyay</p>
</div>

<div class="book-card" style="padding: 20px; display: inline-block;">

<img src="C:\Users\user\Pictures\Saved Pictures\Learn Java in 21 Days.jpg" height="200"
width="150"><br>
<h3>Learn Java in 21 Days</h3>
<p>Author: Jim Brown</p>
</div>

<div class="book-card" style="padding: 20px; display: inline-block;">

<img src="C:\Users\user\Pictures\Saved Pictures\Python for Beginners.jpg" height="200"
width="150"><br>
<h3>Python for Beginners</h3>
<p>Author: Timothy C. Needham</p>
</div>
</div>

<a href="bookCollection.html"><input type="button" value="<< Book Collection"></a>

Government Polytechnic Arvi ~ 11

</center>

<script>
var lastSearch = '';

function searchBook()
{
var query = document.getElementById('searchQuery').value.toLowerCase();
if (query)
{
lastSearch = query;
document.getElementById('lastSearch').innerText += "\n"+lastSearch;
document.getElementById('suggestions').style.display = 'block';
}

var cards = document.querySelectorAll('.book-card');

var found = false;

for (var i = 0; i < cards.length; i++)

{
var title = cards[i].querySelector('h3').innerText.toLowerCase();
if (title.includes(query))
{
cards[i].style.display = 'inline-block';
found = true;
} else
{
cards[i].style.display = 'none';
}
}

if (!found)
{
alert('No books found.');
}
}
</script>
</body>
</html>

Government Polytechnic Arvi ~ 12

Book Collection :
<html>
<head>
<title>Book Collection</title>
</head>
<body bgcolor="#f4f4f4">

<center>
<h1 style="color: white; background-color: #5d8aa8; padding: 10px;">Book Collection</h1>

<h2>Your Favourites</h2>
<p id="bookList">
JavaScript Essentials<br>
HTML & CSS Basics<br>
Learn Java in 21 Days<br>
</p>

<h2>Add to Favourites</h2>
<form>
<label>Book Name:</label><br>
<input type="text" id="bookName" placeholder="Enter book name" size="30"><br><br>

<label>Author Name:</label><br>
<input type="text" id="bookAuthor" placeholder="Enter author name" size="30"><br><br>

<input type="button" value="Add to Favourites" onclick="addBook()">

</form>

<a href="setting.html"><input type="button" value="<< Go to User Settings"></a>

<a href="searchBook.html"><input type="button" value="Search Books >>"></a>

</center>

<script>
function addBook()
{
var bookName = document.getElementById('bookName').value;
var bookAuthor = document.getElementById('bookAuthor').value;

if (bookName.trim() === '' || bookAuthor.trim() === '')

{
alert('Please enter both book and author names.');
return;
}

var bookList = document.getElementById('bookList');

bookList.innerHTML += bookName + ' by ' + bookAuthor + '<br>';

Government Polytechnic Arvi ~ 13

 document.getElementById('bookName').value = '';
document.getElementById('bookAuthor').value = '';
}
</script>
</body>
</html>

Setting :
<html>
<head>
<title>User Settings</title>
</head>
<body bgcolor="#f4f4f4">

<center>
<h1 style="color: white; background-color: #5d8aa8; padding: 10px;">User Settings</h1>

<h2>Change Username</h2>
<form onsubmit="return false;">
New Username:<br>
<input type="text" id="newUsername" placeholder="Enter new username" size="30"><br><br>

<input type="button" value="Change Username" onclick="changeUsername()">

</form>

<h2>Change Password</h2>
<form onsubmit="return false;">
New Password:<br>
<input type="password" id="newPassword" placeholder="Enter new password"
size="30"><br><br>

<input type="button" value="Change Password" onclick="changePassword()">

</form>

<a href="bookCollection.html"><input type="button" value="Book Collection >>"></a>

</center>
<script>
function changeUsername()
{
var newUsername = document.getElementById('newUsername').value;
if (newUsername.trim() === '')
{
alert('Please enter a new username.');
return;
}
alert('Username changed to: ' + newUsername);

Government Polytechnic Arvi ~ 14

 document.getElementById('newUsername').value = '';
}

function changePassword()
{
var newPassword = document.getElementById('newPassword').value;
if (newPassword.trim() === '')
{
alert('Please enter a new password.');
return;
}
alert('Password changed successfully.');
document.getElementById('newPassword').value = '';
}
</script>
</body>
</html>

Government Polytechnic Arvi ~ 15

 5. Output:-

Government Polytechnic Arvi ~ 16

Government Polytechnic Arvi ~ 17
Government Polytechnic Arvi ~ 18
 6. Conclusion :-

This microproject successfully created a dynamic and user-friendly online book

shopping website. The platform enables users to effortlessly browse and search
for books, read user reviews, and complete purchases through an intuitive
shopping cart experience. By incorporating effective search and filtering options,
the website enhances the shopping journey, allowing users to quickly locate
their desired titles and discover new favorites.

In addition to fulfilling its educational objectives, the project provided students

with valuable hands-on experience in HTML, CSS, and JavaScript, helping them
develop essential skills in web development. While the current version of the
website is basic, it establishes a solid foundation for future enhancements, such
as integrating a database for improved inventory management and creating
personalized user accounts for tailored recommendations. Overall, this project
not only addresses the immediate needs of book lovers but also paves the way
for further advancements and features.

7. Skill Development:-

During this project, we developed a variety of skills, including: Problem-Solving

Skills:
During the development of the online book shopping website, we faced several
challenges related to design, functionality, and user experience. Each obstacle
required us to think critically and troubleshoot effectively. By working through
these issues together, we were able to enhance our analytical thinking and
problem-solving abilities, which will be valuable in our future projects.

Collaboration and Teamwork:

Working in a group setting really helped us improve our communication and
collaboration skills. We learned how to combine our individual contributions into
a cohesive project, which highlighted the importance of teamwork in reaching
our common goals. This experience taught us how to navigate differences of
opinion and work together effectively, preparing us for real-world scenarios
where collaboration is essential.

Government Polytechnic Arvi ~ 19

 8. Application of Microproject:-

The online book shopping website can be effectively utilized in various

educational and retail environments for facilitating book purchases. It provides
a straightforward method to browse and manage book inventory, ensuring that
customers can easily find and purchase their desired titles. The platform can be
enhanced further with features such as real-time inventory updates, automated
order confirmations, and user account management for different user roles (e.g.,
customers, administrators). This project lays the groundwork for more
sophisticated e-commerce solutions that can incorporate database management,
admin functionalities, and additional advanced features.

9. Reference :-

For this project, the following references were utilized:

• https://codedamn.com/news/javascript/client-side-scripting

• https://www.geeksforgeeks.org/server-side-client-side-programming/

• https://www.youtube.com/watch?v=B7wHpNUUT4Y&pp=ygUuY2xpZW50I
HNpZGUgc2NyaXB0aW5nIGNvZGUgZGV2ZWxvcGVudCB0dXRvcmlhbA%3D
%3D

• https://www.javatpoint.com/javascript-tutorial

• https://www.youtube.com/watch?v=Zg4uSjxosE&t=1115s&pp=ygU4Y2xpZ
W50IHNpZGUgc2NyaXB0aW5nIHR1dG9yaWFsIGNvZGUgZGV2ZWxvcG1lbn
QgdHV0b3JpYWw%3D

• https://www.javatpoint.com/client

• https://www.w3schools.com/howto/howto_make_a_webbook.asp

Government Polytechnic Arvi ~ 20