Bookly Cont

ABSTRACT
The main objective of the project is to create an online book store that allows
users to search and purchase a book online based on title, author and subject. The
selected books are displayed in a tabular format and the user can order their books
online through credit card payment. Using this Website the user can purchase a book
online instead of going out to a book store and wasting time. There are many online
book stores like Powell’s, Amazon which were designed using Html. I want to develop
a similar website using HTML, JS and PHP.
Online Book store is an online web application where the customer can purchase books
online. Through a web browser the customers can search for a book by its title or
author, later can add to the shopping cart and finally purchase using credit card
transaction. The user can login using his account details or new customers can set up
an account very quickly. They should give the details of their name, contact number
and shipping address. The user can also give feedback to a book by giving ratings on
a score of five. The books are divided into many categories based on subject like
Literature, Database, Programming, Architecture etc.
The Online Book Store Website provides customers with online shopping through a
web browser. A customer can, create, sign in to his account, place items into a
shopping cart and purchase using his credit card details. The Administrator will have
additional functionalities when compared to the common user. He can add, delete and
update the book details, book categories, member information and also confirm a
placed order. This application is developed using HTML, CSS, JS and PHP
programming language. The Master page, data sets, data grids, user controls are used
to develop the Online Book store.
Keywords: Bookstore, HTML, JAVASCRIPT, PHP.

TABLE OF CONTENTS
Title Page No.
Abstract----------------------------------------------------------------------------------i
Chapter 1: Introduction--------------------------------------------------------------1
1.1 Introduction-------------------------------------------------------------1
1.2 Statement of the problem-------------------------------------------- 2
1.3 Objectives---------------------------------------------------------------2
1.4 Applications------------------------------------------------------------3
1.5 Limitations-------------------------------------------------------------3
1.6 Advantages of Proposed Project------------------------------------4
Chapter 2: Methodology------------------------------------------------------------10
Chapter 3: Design--------------------------------------------------------------------10
3.1 Requirements---------------------------------------------------------10
3.2 System Design--------------------------------------------------------14
Chapter 4: Implementation--------------------------------------------------------16
Chapter 5: Proposed System Architecture -------------------------------------22
5.1 Block Diagram-------------------------------------------------------22
5.2 Flow Chart------------------------------------------------------------23
Chapter 6: Coding and Result----------------------------------------------------37
6.1 Code------------------------------------------------------------------27
6.2 Result----------------------------------------------------------------28
Chapter 7: Conclusion and Future work--------------------------------------30
7.1 Conclusion----------------------------------------------------------30
7.2 Future work---------------------------------------------------------31

BOOKLY
CHAPTER 1
INTRODUCTION
1.1 Introduction:
Online shopping is the process whereby consumers directly buy goods, services etc.
from a seller interactively in real-time without an intermediary service over the
internet. Online shopping is the process of buying goods and services from merchants
who sell on the Internet. Since the emergence of the World Wide Web, merchants have
sought to sell their books to people who surf the Internet. Shoppers can visit web stores
from the comfort of their homes and shop as they sit in front of the computer.
Consumers buy a variety of items from online stores. In fact, people can purchase just
about anything from companies that provide their books online. Books, clothing,
household appliances, toys, hardware, software, and health insurance are just some of
the hundreds of books consumers can buy from an online store. Many people choose
to conduct shopping online because of the convenience. For example, when a person
shops at a brick-and-mortar store, she has to drive to the store, find a parking place,
and walk throughout the store until she locates the books she needs. After finding the
items she wants to purchase, she may often need to stand in long lines at the cash
register. This project intends different types of forms with many types of books like
story, drama, romance, history, adventures, etc. it can manage studying of books
online, customers can choose many types of books categories, etc. Here, the user may
select desired book and view its price. The user may even search for specific books on
the website. Once the user selects a book, he then has to fill in a form and the book is
provided for the user.
1.2 Problem Statement:
As with most online sites, you need a lot of trust to use online bookstores. The major
problem of the online store is that when any sort of network error or power supply
cut occurs, then the book starts from the beginning. There is no bookmarks as well.
There are no proper application or website to where the students can find study
materials for their examination under one roof. Students have to search a lot on the
web to get complete study materials
1 Department of CSSE
BOOKLY
1.3 Objectives:
The objective of this project is to develop an e- book store where books can be studied
from the comfort of home through the Internet.
The Objectives are:
 To read and save the details of book and its author’s name.
 To provide an essence of online book store via simple and yet
powerful medium.
 View books of all categories.
 Economical, quick and time convenient.
1.4 Applications:
Most of the people, these days are connected with technology and are familiar
with it. So, this application is useful to all the website users as they can study
all the required books in their devices using this application.
1.5 Limitations:
 Book arrived damaged.
 Shipping takes much time.
 It takes a lot of trust.
 If the customer receives a book that is not in proper condition or has
some kind of defect then there incurs an additional charge of posting it
back.
 Cannot be used without internet.
 Users cannot give feedbacks.
 Limited books are only available.
 Error in spelling by the user cannot provide the exact book they want.
BOOKLY
1.6 Advantages of online book store:
 Customers can get their book delivered instead of actually going and
buying the book. They can make payment online itself.
 Managing of inventory in the shop for shopkeeper becomes easier as
customers are not visiting and ordering online.
 This system saves both time and travelling cost of customers.
 User can get to know different kinds of books that they were unaware of
by just searching in the system using keywords.
 Online consumers can track the order status and delivery status tracking
of shipping is also available
BOOKLY
CHAPTER-2
METHODOLOGY
With the online bookstore system, consumers do not need to blindly go to

various places to find their own books, but only in a computer connected to
the Internet log on online bookstore system, in the search box, type you want
to find Of the book information retrieval, you can efficiently know whether
the site has its own books, if you can online direct purchase, if not, you can
change the home bookstore to continue to search or provide advice to the
seller in order to supply, This greatly facilitates every consumer, saving time
and labor. The online bookstore system can not only reduce costs, save time,
space, to bring convenience to everyone, but also to promote the development
of the logistics industry, serve three purposes, mutual benefit. More
importantly, in today's world, the increasingly close ties between countries,
more frequent exchanges, the economy tends to globalization, which promote
the future development of online bookstore system has some practical
significance. With the online bookstore system, consumers do not need to
blindly go to various places to find their own books, but only in a computer
connected to the Internet log on online bookstore system, in the search box,
type you want to find Of the book information retrieval, you can efficiently
know whether the site has its own books, if you can online direct purchase, if
not, you can change the home bookstore to continue to search or provide
advice to the seller in order to supply, This greatly facilitates every consumer,
saving time and labor. The online bookstore system can not only reduce costs,
save time, space, to bring convenience to everyone, but also to promote the
development of the logistics industry, serve three purposes, mutual benefit.
BOOKLY
CHAPTER-3
SYSTEM DESIGN
4.1 Requirements:
 The user should have the appropriate version of windows.
 The system should have up to 1 GB ram minimum requirement for the
application.
 The application should be installed on the system.
 Internet Connectivity is a must for this purpose.
 CPU with a speed of 1.3Ghz is a good choice for normal usage
Hardware Requirements:
Hardware requirements for running this project are as follows:
Processor : Pentium I or above .
RAM : 4 GB or above .
HD : 50 GB or above .
Software Requirements:
Software requirements to make working of product is:
Front End : HTML,JAVASCRIPT .
Back End : PHP, My SQL .
BOOKLY
4.2 System Design:

System function design
The main functions of the online bookstore system modules are divided into two
categories, one for the consumer demand for books on the front of the functional
modules, and the other is for the administrator of the background function modules.
Order management is an overlapping part of two functional modules. Throughout

the system, the order of the system has five states, namely 1,2,3,4 and 5 state. 1
status is waiting for the payment status, indicating that the order has just been
generated yet payment; 2 state is waiting for the delivery status, indicating that the
order has been paid but the administrator has not shipped; 3 state is waiting for
confirmation, that the administrator has But the consumer has not confirmed the
receipt; 4 state is the transaction successful state, that the administrator shipped, the
consumer has confirmed receipt, once the order for the 4 state, the status of the order
can not be changed; The order is canceled and the order can be canceled in the
background only if the orders are in the 1 and 2 states. In the background, the order
is canceled.
The functions of the foreground module

1.User Registration Login: Users can register as a member, the user can become a
member after login, modify personal information, modify the password and exit.
2.Category display: In the left navigation bar displays the primary classification
name of the book and the secondary classification contained in the primary
classification, and the corresponding secondary book information is under the
secondary classification.
3.Book display: Search for books by title or keyword, search for books by advanced
query (by title, author, and publisher), search books by category, view book details,
and more.
4.Shopping Cart Management: Putting the book what you are interested in or want
to buy to add to the shopping cart for later viewing, in the shopping cart can modify
the number of books, delete the shopping cart book information can be deleted
individually or batch delete.
5.Order Management: Generate an order by submitting an order, review the details

of an existing order, confirm receipt of the goods after the seller has shipped, and
cancel the order in the correct order. After the transaction is successful, you can
evaluate the book and display it under the Book Details page.
BOOKLY
Background module function :
1.Classification management: View classification, add a classification of secondary

classification, modify the primary classification of secondary classification, delete
the primary classification of secondary classification.
2.Book Management: Background administrators have the same functionality as

foreground users in searching for books, but administrators can also control book
information such as adding books, editing book information, and deleting book
information.
3.Order Management: View orders by order status, view order details, can cancel
orders before they are shipped, and can be shipped after buyer payment.
4.Comment Management: Administrators can see all the reviews of the book by
the consumer, and can add a reply to any one of the reviews and display it under the
Book Details page.
BOOKLY
CHAPTER-4
IMPLEMENTATION
Till this date all the works has been completed. The front end of application consists
of home page which consist of login section with other options like user register and
forget password. There are other sub topics like upload file from which users can
upload their own books. Logout option from which users can leave the home page.
Also from search option user can search their required books. The project requires
some serious study of database and how it can be collaborated with PHP. Hence a lot
of work has been invested on study of those things. Here in this project main focus is
given to things like login, search, upload file, logout and book details. Concept of
database and online processing is widely used in this application.
In 1992, Sony launched the Data Discman an electronic book reader that could read e-
books that were stored on CDs. One of the electronic publications that could be played
on the Data Discman was called The Library of the Future. Early e-books were
generally written for specialty areas and a limited audience, meant to be read only by
small and devoted interest groups. The scope of the subject matter of these e-books
included technical manuals for hardware, manufacturing techniques, and other
subjects. In the 1990s, the general availability of the Internet made transferring
electronic files much easier, including e-books.
As e-book formats emerged and proliferated, some garnered support from major
software companies, such as Adobe with its PDF format that was introduced in
1993.Unlike most other formats, PDF documents are generally tied to a particular
dimension and layout, rather than adjusting dynamically to the current page, window,
or other size. Different e-reader devices followed different formats, most of them
accepting books in only one or a few format, thereby fragmenting the e-book market
even more. Due to the exclusiveness and limited readerships of e-books, the fractured
market of independent publishers and specialty authors lacked consensus regarding a
standard for packaging and selling e-books
BOOKLY
CHAPTER-5
PROPOSED SYSTEM ARCHITECTURE
The online bookstore's main users are divided into two categories, one is the front
user, one is the background user. Front-end users are mainly customers who consume
online bookstores. Front-end users can register, login, query, join shopping cart, place
orders, submit orders, modify personal information, confirm receipt and add
comments on the website. And add, modify or delete the book classification; add,
modify or delete the book information, manage the order information and reply to the
user's comments. The user is the administrator, the administrator to play the role of
overall planning, master and control the front information and so on.
5.1 Block Diagram:
BOOKLY
5.2 Flow Chart:
BOOKLY
CHAPTER-6
CODING ANALYSIS AND RESULTS
6.1 Code:
i.Signup page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign in | Bookly Online Book Store</title>
</head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Codystar:wght@300&fami
ly=Raleway:wght@100&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"><link
rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
ly=DM+Sans&family=Poppins:wght@300&family=Raleway:wght@100&family=Sta
atliches&display=swap" rel="stylesheet">
<link
ly=DM+Sans&family=Poppins:wght@300&family=Raleway:wght@100&family=Sta
atliches&family=Varela+Round&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Inter&family=Work+Sans
&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2240edf3b1.js"
crossorigin="anonymous"></script>
<style>
body{
background-color: #D8D7D5;
/* background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: cover; */
}
table{
width: 100%;
}
</style>
<body>
<table>
BOOKLY
<tr style="border: 1px solid white;">

<td id="name"><img src="logo.png" alt="Logo" id="logo"> BOOKLY</td>
<td style="text-align: right;">
<a href="saihome.html">Home</a>
<a href="">Shop</a>
<a href="About us.html">About Us</a>

</td>
</tr>
</table><hr>
<div>
<div id="left">
<p id="signupnote">Join the world’s best marketplace for books.</p>
<img src="B3.png" alt="B3" id="B3">
</div>
<div id="right">
<div id="credentials">
<p id="signup">Sign up for Bookly</p>
<form action="">
<p id="cname">Name*</p><br><br>
<input type="text" name="cusname" id="cusname" required><br>
<p id="cnum">Phone No*</p><br><br>
<input type="number" name="cusnum" id="cusnum" required><br>
<p id="ph">Email*</p><br><br>
<input type="text" name="username" id="usernamebox" required>
<p id="ph">Password*</p>
<input type="password" name="password" id="passwordbox"
required><br><br>
<a href="">
<button class="btn btn-primary btn-lg"><span id="now">Sign
Up</span></button><br><br>
<a href="Log In.html" id="existinguser">Have an account? Log In!</a>
</form>
</div>
</div>
</div>
<div id="footer">
<a href="">Terms</a>
<a href="">Cookies Policy</a>
<a href="">Privacy Policy</a>
</div>
</body>
</html>
ii. Login Page:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Log in | Bookly Online Book Store</title>
<link
BOOKLY
crossorigin="anonymous"></script>
</head>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Codystar:wght@300&famil
y=Raleway:wght@100&display=swap');
@import
y=DM+Sans&family=Poppins:wght@300&family=Raleway:wght@100&family=Staa
tliches&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import
tliches&family=Varela+Round&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Inter&family=Work+Sans&
display=swap');
body{
}
table{
width: 100%;
}
</style>
<body>
<table>
<td id="name"><img src="logo.png" alt="Logo" id="logo"> BOOKLY</td>
<a href="">Shop</a>

</td>
</tr>
</table><hr>
<div>
<div id="left">
<p id="loginnote">Welcome back to the world’s best marketplace for
books.</p>
</div>
<div id="right">
<div id="credentials">
<p id="login">Log in to Bookly</p>
<form action="">
<input type="radio" id="no" name="mail" value="Number">
<label for="no">Number</label>
<input type="radio" id="mail" name="mail" value="Email">
<label for="mail">Email</label><br><br>
<p id="ph">Phone No or Email*</p><br><br>
<input type="text" name="username" id="usernamebox" required>
BOOKLY
<p id="ph">Password*</p>
<a href="" id="forgotpassword">Forgot Password?</a>
<input type="password" name="password" id="passwordbox"
required><br><br>
<a href="">
<button class="btn btn-primary btn-lg"><span id="now">Log
In</span></button><br><br>
<a href="Sign In.html" id="newuser">New Here? Sign up!</a>
</form>
</div>
</div>
</div>
<div id="footer">
<a href="">Terms</a>
<a href="">Cookies Policy</a>
<a href="">Privacy Policy</a>
</div>
</body>
</html>
iii. Home Page:

<!DOCTYPE html>
<html>
<head>
<title>Bookly | Online Book Store</title>
<link
crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-
bundle.min.css" />
</script>
</head>
<style>
@import
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;40
0;500;600&display=swap');
body{
}
table{
width: 100%;
position: static;
}
#name{
font-size: 40px;
font-family: verdana;
font-weight: bold;
color: rgb(0, 0, 0);
BOOKLY
padding-left: 20px;
padding-top: 20px;
}
#logo{
height: auto;
width: 50px;
}
</style>
<body>
<table>
<td id="name"> <img src="logo.png" alt="Logo" id="logo">
BOOKLY</td>
<td id="nav" style="text-align: right;">
<a href="Shop.html">Shop</a>
<i class="fa-solid fa-magnifying-glass"
id="magnifyingglass"></i>
<div class="user">
<i class="fa-regular fa-user" id="profile"></i>
<div class="profiledpdown">
<a href="Log In.html">Log In</a>
<a href="Sign In.html">Sign Up</a>
</div>
</div>
</td>
</tr>
</table><hr>
<div id="content">
<div id="left">
<p id="new">NEW</P>
<p id="year">YEAR</p>
<p id="sale">SALE</p>
<p id="motive">get new books for half the price.</p>
<a href="">
<button class="btn btn-primary btn-lg"><span
id="now">SHOP NOW</span></button>
</div>
<div id="right">
<img src="Book1.png" alt="book1" id="book1">
<img src="Book2.png" alt="book2" id="book2">
</div>
</div><br><br><br><br><br><br><br><br><br><br>
<div class="reviews">
<h1 class="heading"> <span>TESTIMONIALS</span> </h1>
<div id="testimonials">
<div id="tleft">
<img src="review2.jpg" alt="" id="sairam">
<h3>Hema</h3>
<p id="review">I am so happy to find this
site. The packaging was phenomenal and my book arrived on time in
perfect condition."</p>
</div>
<div id="tright">
<div id="bharight">
<img src="review1.jpg" alt="" id="bharath">
<h3>Lisa</h3>
<p id="review">"This item was not available
on Amazon, somehow, I located it on the publishers website.
Awesome.!"</p>
BOOKLY
</div>
</div>
</div>
</div>
<section class="footer">
<div class="share">
<a href="https://www.facebook.com/login/" class="fab fa-
facebook-f"></a>
<a href="https://twitter.com/i/flow/login" class="fab fa-
twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-linkedin"></a>
<a href="#" class="fab fa-pinterest"></a>
</div>
<div class="credit"> ALL RIGHTS ARE RESERVED..! </div>
</section>
<script src="https://unpkg.com/swiper@7/swiper-
bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
iv. Shop Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping cart </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
@import
@import
@import
tliches&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import
tliches&family=Varela+Round&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Inter&family=Work+Sans&
display=swap');
body{
}
table{
width: 100%;
BOOKLY
position: static;
</style>
</head>
<body>
<br><br>
<table>
<td id="name"> <img src="logo.png" alt="Logo" id="logo">
BOOKLY</td>
<h1 style="position: fixed;"><i class=" fa fa-

shopping-cart" style="font-size: 30px;"></i></h1>
</td>
</tr>
</table><hr>
<br>
<br>
<div id="categories">
<nav id="navbar">
<a href="#programming">Programming</a>
<a href="#self">Self - Improvement</a>
<a href="#literature">Literature</a>
<a href="#history">History</a>
<a href="#novels">Novels</a>
</nav>
</div><br>
<section id="programming" >
<div class="item">
<img src="PB1.png">
<p>Java The Complete Reference
It comprehensively covers basic Java concepts such as
programming principles, keywords, Java language syntaxes, Java 8 API,
JavaBeans, servlets, applets, swing, etc.</p>
<h6>₹1000</h6>
<span></span>
<br>
<button>Add-cart</button>
</div>
<div class="item">
<img src="PB2.png">
<p>Ideal for web developers and software
engineers who understand how JavaScript, CSS, and HTML work in the
browser, this updated edition provides best practices and patterns
for writing modern React code.</p>
<h6>₹1200</h6>
<span></span>
<br>
</div>
<div class="item">
<img src="PB3.png">
<p>The Python Book delivers an essential
introductory guide to learning Python for anyone who works with data
but does not have experience in programming. </p>
BOOKLY
<h6>₹999</h6>
<span></span>
<br><br>
</div>
<div class="item">
<img src="PB5.png">
<p>This book equips you with a fundamental grasp
of Artificial Intelligence and its impact. It provides a non-
technical introduction to important concepts such as Machine
Learning, Deep Learning, Natural Language Processing, Robotics, and
more</p>
<h6>₹1500</h6>
<span></span>
</div>
</section>
<section id="self" >
<div class="item">
<img src="SB1.png">
<p>Java The Complete Reference
It comprehensively covers basic Java concepts such as
programming principles, keywords, Java language syntaxes, Java 8 API,
JavaBeans, servlets, applets, swing, etc.</p>
<h6>₹1000</h6>
<span></span>
<br>
</div>
<div class="item">
<img src="SB2.png">
<p>Ideal for web developers and software
engineers who understand how JavaScript, CSS, and HTML work in the
browser, this updated edition provides best practices and patterns
for writing modern React code.</p>
<h6>₹1200</h6>
<span></span>
<br>
</div>
<div class="item">
<img src="sb3.png">
<p>The Python Book delivers an essential
introductory guide to learning Python for anyone who works with data
but does not have experience in programming. </p>
<h6>₹999</h6>
<span></span>
<br><br>
</div>
<div class="item">
<img src="sb4.png">
<p>This book equips you with a fundamental grasp
of Artificial Intelligence and its impact. It provides a non-
technical introduction to important concepts such as Machine
Learning, Deep Learning, Natural Language Processing, Robotics, and
more</p>
<h6>₹1500</h6>
<span></span>
BOOKLY
</div>
</section>
<div class="select">
<script type="text/javascript" src="js/main.js"></script>
<a href="checkout.html"><button>CHECK OUT</button></a>
</div>
</body>
</html>
v. About Us:
<!DOCTYPE html>
<html lang="en">
<head>
<title>About us | Bookly Online Book Store</title>
<link
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outli
ned:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
crossorigin="anonymous">
</script>
</head>
<style>
@import
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
'FILL' 0,
'wght' 400,
'GRAD' 0,
BOOKLY
'opsz' 48
}
body{
}
table{
width: 100%;
}
#name{
font-size: 40px;
font-family: verdana;
font-weight: bold;
color: rgb(0, 0, 0);
padding-left: 20px;
padding-top: 20px;
}
</style>
<body>
<table>
<td id="name">BOOKLY</td>
<a href="Shop.html">Shop</a>
<i class="fa-solid fa-magnifying-glass"></i>
<div class="user">
<i class="fa-regular fa-user" id="profile"></i>
<div class="profiledpdown">
<a href="Log In.html">Log In</a>
<a href="Sign In.html">Sign Up</a>
</div>
</div>
</td>
</tr>
</table><hr>
<h1>About us</h1>
<div id="about">
<p id="us">Since its fuse in 2005, Company Name has cut a specialty
for itself in the youngsters’ books section of the distributing
business. We have some expertise in books implied for offspring of
various ages.
The wide scope of books offered by us incorporates fantasies,

moral stories, showed storybooks, reference books, general learning
books, sentence structure books, shading books, action books, sticker
books, and some more. Every one of these books is accessible in both
English and Hindi.
Our point is to give significant, charming, and also animating

substance to youngsters that go much past their normal course books.</p>
</div><br><br>
<table id="aboutus">
<tr>
<td><span class="material-symbols-outlined" style="font-
size: 100px;">local_shipping</span></td>
size: 100px;">support_agent</span></td>
BOOKLY

size: 100px;">credit_card</span></td>
</tr>
<tr>
<td>Fast Delivery</td>
<td>24/7 Service</td>
<td>Secure pay</td>
</tr>
</table>
</body>
</html>
vi. Check Out:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<linkrel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial;
font-size: 17px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%;
flex: 25%;
}
.col-50 {
-ms-flex: 50%;
flex: 50%;
}
.col-75 {
-ms-flex: 75%;
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
BOOKLY
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
display: block;
}
.icon-container {
padding: 7px 0;
font-size: 24px;
}
.btn {
background-color: #102a20;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
a {
color: #2196F3;
}
hr {
border: 1px solid lightgrey;
}
span.price {
float: right;
color: grey;
}
@media (max-width: 800px) {

.row {
flex-direction: column-reverse;
}
.col-25 {
BOOKLY
}
}
</style>
</head>
<body>
<form action="cart.html">
<input type="submit" value="<-BACK">
</form>
<div class="row">
<div class="col-75">
<div class="container">
<form action="success.html">
<div class="row">
<h3>Billing Address</h3>
<label for="fname"><i class="fa fa-user"></i> Full
Name</label>
<input type="text" id="fname" name="firstname"
placeholder="sai">
<label for="email"><i class="fa fa-envelope"></i>
Email</label>
<input type="text" id="email" name="email"
placeholder="saik@example.com">
<label for="adr"><i class="fa fa-address-card-o"></i>
Address</label>
<input type="text" id="adr" name="address"
placeholder="22-4 svec tpty">
<label for="city"><i class="fa fa-institution"></i>
City</label>
<input type="text" id="city" name="city"
placeholder="tpty">
<div class="row">
<label for="state">State</label>
<input type="text" id="state" name="state"
placeholder="AP">
</div>
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip"
placeholder="50001">
</div>
</div>
</div>
<h3>Payment</h3>
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>

<input type="text" id="cname" name="cardname"
placeholder="SAIRAM K">
<label for="ccnum">Credit card number</label>
BOOKLY
<input type="text" id="ccnum" name="cardnumber"

placeholder="1111-2222-3333-4444">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth"
placeholder="September">
<div class="row">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear"
placeholder="2026">
</div>
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv"
placeholder="352">
</div>
<input type="radio" name="CASH ON DELIVERY"
id="COD">
<label for="COD">CASH ON DELIVERY</label>
</div>
</div>
</div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr">
Shipping address same as billing
</label>
<input type="submit" value="Continue to checkout" class="btn">
</form>
</div>
</div>
<div class="container">
<h4>Cart <span class="price" style="color:black"><i class="fa
fa-shopping-cart"></i> <b>2</b></span></h4>
<p><a href="IMAGES/HTMLIMG.jfif">Product 1</a> <span
class="price">₹1000</span></p>
<p><a href="IMAGES/JS.jpg">Product 2</a> <span
class="price">₹1250</span></p>
<hr>
<p>Total <span class="price"
style="color:black"><b>₹2250</b></span></p>
</div>
</div>
</div>
</body>
</html>
vii. Order Success Page:
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,70
0,900&display=swap" rel="stylesheet">
</head>
BOOKLY
<style>
body {
text-align: center;
padding: 40px 0;
background: #EBF0F5;
}
h1 {
color: #88B04B;
font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
font-weight: 900;
font-size: 40px;
}
p {
color: #404F5E;
font-family: "Nunito Sans", "Helvetica Neue", sans-serif;
font-size:20px;
margin: 0;
}
i {
color: #9ABC66;
font-size: 100px;
line-height: 200px;
margin-left:-15px;
}
.card {
background: white;
padding: 60px;
border-radius: 4px;
box-shadow: 0 2px 3px #C8D0D8;
display: inline-block;
margin: 0 auto;
}
</style>
<body>
<div class="card">
<div style="border-radius:200px; height:200px; width:200px;
background: #F8FAF5; margin:0 auto;">
<i class="checkmark">✓</i>
</div>
<h1>Success</h1>
<p>We received your purchase request;<br/>Order placed
Successfully..!</p>
</div>
</body>
</html>
CSS Styles:
@importurl('https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css');
*{
margin: 0;
padding: 0;
color: #454545;
}
h1{
width: 3%;
position: relative;
BOOKLY
top: 60px;
left: 90%;
cursor: pointer;
}
h1:before{
content: attr(data-count);
color: white;
position: absolute;
right: 16px;
font-size: 15px;
text-align: center;
top: -12px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
opacity: 0;
}
h1.zero:before{
opacity: 1;
}
section{
margin: 100px auto;
width: 90%;
height: 400px;
display: flex;
justify-content: space-around;
}
section div{
width: 22%;
height: 93%;
background:#f5f5f5;
padding: 1%;
position: relative;
}
img{
width: 300px;
height: 186px;
}
p{
margin: 5px;
}
h6{
width: 50px;
padding: 5px;
margin: 10px;
font-size: 15px;
}
button{
padding: 5px;
background: red;
border: none;
outline: none;
font-weight: bold;
color: #fafafa;
cursor: pointer;
}
section div span{
position: absolute;
top: 14px;
BOOKLY
left: 13px;
background: red;
width: 300px;
height: 186px;
display: none;
}
section div span img{
width: 100%;
height: 100%;
}
section div:nth-child(1)>span.active{
animation: first 0.5s ease-in;
z-index: 2;
display: block;
}
animation: second 0.5s ease-in;
z-index: 2;
display: block;
}
animation: third 0.5s ease-in;
z-index: 2;
display: block;
}
animation: four 0.5s ease-in;
z-index: 2;
display: block;
}
@keyframes first{
to{
width: 30px;
height: 20px;
left: 1290px;
top: -70px;
}
}
@keyframes second{
to{
width: 30px;
height: 20px;
left: 948px;
top: -70px;
}
}
@keyframes third{
to{
width: 30px;
height: 20px;
left: 606px;
top: -70px;
}
}
@keyframes four{
to{
width: 30px;
BOOKLY
height: 20px;
left: 265px;
top: -70px;
}
}
.select{
width: 60%;
height: 580px;
padding: 5%;
background: #222;
position: absolute;
top: -1000px;
left: 20%;
transition: 0.5s;
overflow-y: auto;
margin: auto;
}
.select.display{
top: 10px;
}
.select div{
width: 100%;
height: 200px;
display: flex;
padding: 5px;
border: 1px solid white;
position: relative;
margin: 5px auto;
}
.select div img{
width: 300px;
height: 100%;
}
.select div p{
padding: 35px;
color: white;
}
.select div h6,
.select div button{
position: absolute;
left: 45%;
top: 50%;
color: white;
}
.select div button{
left: 60%;
top: 55%;
}
.select div span{
display: none;
}
JAVASCRIPT FOR CART:
BOOKLY
var noti = document.querySelector('h1');

var select = document.querySelector('.select');
var button = document.getElementsByTagName('button');
for(var but of button){
but.addEventListener('click', (e)=>{
var add = Number(noti.getAttribute('data-count')
|| 0);
noti.setAttribute('data-count', add +1);
noti.classList.add('zero')
// image --animation to cart ---//
varimage=e.target.parentNode.querySelector('img');
varspan=e.target.parentNode.querySelector('span');
var s_image = image.cloneNode(false);
span.appendChild(s_image);
span.classList.add("active");
setTimeout(()=>{
span.classList.remove("active");
span.removeChild(s_image);
}, 500);
var parent = e.target.parentNode;

var clone = parent.cloneNode(true);
select.appendChild(clone);
clone.lastElementChild.innerText = "Buy-now";
if (clone) {
noti.onclick = ()=>{
select.classList.toggle('display');
}
}
}
)
}
var check = parent.cloneNode(true);
select.appendChild(check);
check.lastElementChild.innerText="CHECK-OUT";
6.2 Result:
BOOKLY
i. Sign Up Page:
This page is registration form for new user to sign up. It reads several basic details
from user like name, phone number, email, age. It stores these details to database of
the website and creates new login for the user.
ii. Login Page:
Login page is used to validate the user details before they login to the website. The
credentials of user will be mapped with database and provide access to the user.
BOOKLY
iii. Home Page:
This is the main webpage where user user will access after the login. It
consists several new arrivals and customer reviews about website.
iv. Shop Page:
This page contains various types of books where user can read description and
buy. This page contains various sections like Literature, Programming, Novels.
BOOKLY
Cart:
In shop page user can add items to the cart by clicking “Add cart” button and
added books will be stored in the cart based on local storage concept.
V. About Us page:
This page briefly describes the services provided by the Bookly website to
the users.
BOOKLY
vi. Check Out Page:
This page will read the shipping and billing address from the user to deliver the
books. It contains the payment mode to pay the order amount.
vii. Success Page:
This is the page which confirms whether order placed successfully or not to the
user.
BOOKLY
CHAPTER-7
CONCLUSION AND FUTURE WORK
7.1 Conclusion:
Online bookstore has many advantages compared to its counterparts such as physical book store,
the online bookstore allows it's user to shop at one place where in physical store the books are
scattered at the different places which consumes a lot of time and online bookstore helps in saving
that time and it also avoids the problem of unavailability of books at physical store as numerous
vendors from different places sell their books at one place. This project is efficient in maintaining
users records and can perform operations on it, also reduces the work load on the shop owner of
knowing the quantity of books available and which books are available and keeps the records of
how many books are purchased and sold.
The system is a general hobby for reading and books on the needs of the consumer customer base,
with a certain degree of practical online bookstore system. It is mainly different from the
traditional physical bookstores, to overcome a series of physical bookstores limited variety, fixed
location, limited space and narrow sales channels and other issues, for people to purchase the book
has brought convenience.
Online bookstore system not only can easily find the information and purchase books, and the
operating conditions are simple, user-friendly, to a large extent to solve real-life problems in the
purchase of books, but the design of the system because of the completion time Of the restrictions,
some of the functions of the system is not perfect, but the basic functions have been achieved.
7.2 Future Work:
BOOKLY
In a nutshell, it can be summarized that the future scope of the project circles around
maintaining information regarding:
 We can give more advance software to the online book store including more facilities.
 We will host the platform on online servers to make it accessible worldwide.
 Integrate multiple load balancers to distribute the loads of the system.
 Create master and slave database structure to reduce the overload of database queries.
 Implement the backup mechanism for taking backup of codebase and database on
regular basis on different servers.
 We can add printer in future.
The above mentioned points are the enhancements which can be done to increase the applicability
and usage of this project. Here we can maintain the records of books and customers. Also, as it
can be seen that now a days the players are versatile, i.e. so there is a scope for introducing a
method to maintain the online book store.
We have left all the options open so that if there is any other future requirement in the system
by the user for the enhancement of the system then it is possible to implement them.

Bookly Cont

Uploaded by

Document Information

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

Bookly Cont

Uploaded by

Copyright:

Available Formats

ABSTRACT

Keywords: Bookstore, HTML, JAVASCRIPT, PHP.

Title Page No.

1.2 Statement of the problem-------------------------------------------- 2

1.6 Advantages of Proposed Project------------------------------------4

3.2 System Design--------------------------------------------------------14

Chapter 5: Proposed System Architecture -------------------------------------22

5.1 Block Diagram-------------------------------------------------------22

5.2 Flow Chart------------------------------------------------------------23

Chapter 6: Coding and Result----------------------------------------------------37

Chapter 7: Conclusion and Future work--------------------------------------30

7.2 Future work---------------------------------------------------------31

1.2 Problem Statement:

The Objectives are:

1.6 Advantages of online book store:

With the online bookstore system, consumers do not need to blindly go to

Processor : Pentium I or above .

Software requirements to make working of product is:

Front End : HTML,JAVASCRIPT .

Back End : PHP, My SQL .

4.2 System Design:

Order management is an overlapping part of two functional modules. Throughout

The functions of the foreground module

5.Order Management: Generate an order by submitting an order, review the details

Background module function :

1.Classification management: View classification, add a classification of secondary

2.Book Management: Background administrators have the same functionality as

PROPOSED SYSTEM ARCHITECTURE

5.1 Block Diagram:

5.2 Flow Chart:

<tr style="border: 1px solid white;">

ii. Login Page:

iii. Home Page:

<div class="credit"> ALL RIGHTS ARE RESERVED..! </div>

iv. Shop Page:

<a href="About us.html">About Us</a>

<h1 style="position: fixed;"><i class=" fa fa-

The wide scope of books offered by us incorporates fantasies,

Our point is to give significant, charming, and also animating

<td><span class="material-symbols-outlined" style="font-

vi. Check Out:

@media (max-width: 800px) {

<label for="cname">Name on Card</label>

<input type="text" id="ccnum" name="cardnumber"

vii. Order Success Page:

JAVASCRIPT FOR CART:

var noti = document.querySelector('h1');

// image --animation to cart ---//

var parent = e.target.parentNode;

ii. Login Page:

iii. Home Page:

iv. Shop Page:

vi. Check Out Page:

vii. Success Page:

7.2 Future Work:

You might also like