CHAPTER 1

INTRODUCTION

Education, an integral part of our Indian Society and it is important for every individual to succeed
in his life and help bring change to our world. In a country with more than 1.3 billion. people
living, for everyone individual education is essential. To keep learning and developing themselves
and helping our environment, economy, social life be sustainable.[27]

Bookz kart is an interactive e-commerce solution providing users with an opportunity to buy and
sell books. Bookz Kart is the first online platform which deals with new and old books of all fields,
we deliver a constructive service to each and every person of Jammu & Kashmir to furnish their
needs in terms of learning, education and technology by providing them with an online platform
where they can Buy and sell books for affordable price and even they can sell their used books on
our website and also get books on rent. Bookz kart provides users with wide range of pre-owned
books which get a check based on their condition and fixed to its best and delivered to consumer's
doorsteps.

1.1 OBJECTIVES

Online Shopping is the process whereby consumers directly buy goods and services without any
intermediary service over the internet. The goal of this website is to develop a web based interface
for students of Jammu and Kashmir, the website would be easy to use and hence the shopping
experience pleasant for the users. The main goal of this website is:

I. To develop an easy to use web based interface where students can search for products (books),
view a complete description of the product and order the product.

II. A student can buy and sell books from home.

III. A student can get books on rent.[23]

1.2 SCOPE

The scope of the BOOKZ KART encompasses the complete digitalization of online Book
shopping, product management, and customer interaction. It covers product listing, inventor
management, ordering processing, payment integration, shipment tracking, user reviews, and
customer engagement—all within a single, centralized system.[6]

1
 CHAPTER 2
WEB-DEVELOPMENT
Web development is a broad term for the work involved in developing a web site for the Internet
(World Wide Web) or an intranet (a private network). Web development can range from developing
the simplest static single page of plain text to the most complex web-based internet applications,
electronic businesses, and social network services. A more comprehensive list of tasks to which
web development commonly refers, may include web engineering, web design, web content
development, client liaison, client-side/side scripting, web server and network security
configuration, and e-commerce development. Among web professionals, "web development"
usually refers to the main non-design aspects of building web sites: writing markup and coding.
Most recently Web development has come to mean the creation of content management systems
or CMS. These CMS can be made from scratch, proprietary or open source. In broad terms the
CMS acts as middleware between the database and the user through the browser. A principle
benefit of a CMS is that it allows non-technical people to make changes to their web site without
having technical knowledge.[21]

For larger organizations and businesses, web development teams can consist of hundreds of people
(web developers) and follow standard methods like Agile methodologies. while developing
websites. Smaller organizations may only require a single permanent or contracting developer, or
secondary assignment to related job positions such as a graphic designer or information systems
technician. Web development may be a collaborative effort between departments rather than the
domain of a designated department. There are three kind of web developer specialization: front-
end developer, back-end developer, and full-stack developer.[12]

2.1 WEB-SITE

A website is a collection of related web pages, including multimedia content, typically identified
with a common domain name, and published on at least one web server. A website may be
accessible via a public Internet Protocol (IP) network, such as the Internet, or a private local area
network (LAN), by referencing a uniform resource locator (URL) that identifies the site.[19]

Websites have many functions and can be used in various fashions; a website can be a personal
website, a commercial website for a company, a government website or a non-profit organization
website. Websites are typically dedicated to a particular topic or purpose, ranging from
entertainment and social networking to providing news and education. All publicly accessible
websites collectively constitute the World Wide Web, while private websites, such as a company's
website for its employees, and are typically a part of an intranet.[5]
Web pages, which are the building blocks of websites, are documents, typically composed in plain
text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML).
They may incorporate elements from other websites .[17]
Language (HTML, XHTML), may incorporate elements from other websites with suitable markup
anchors. Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP),
which may optionally employ encryption (HTTP Secure, HTTPS) to provide security and privacy
for the user. The user's application, often a web browser, renders the pe content according to its
HTML markup instructions onto a display terminal.[14]

Hyperlinking between web pages conveys to the reader the site structure and guides the navigation
of the site, which often starts with a home page containing a directory of the site web content.
Some websites require user registration or subscription to access content. Examples of subscription
websites include many business sites, news websites, academic journal websites, gaming websites,
file-sharing websites, message boards, web-based email, social networking websites, websites
providing real-time stock market data, as well as sites providing various other services. As of 2016
end users can access websites on a range of devices, including desktop and laptop computers, tablet
computers, smartphones and smart TVs.[22]

A web site consists of web pages which are interconnected to each other and contain various data
and functionalities.[1]

2.2 WEB-PAGE

A web page, or webpage, is a document that is suitable for the World Wide Web and web browsers.
A web browser displays a web page on a monitor or mobile device. The web page is what displays,
but the term also refers to a computer file, usually written in HTML or comparable markup
language. Web browsers coordinate the various web resource elements for the written web page,
such as style sheets, scripts, and images, to present the web page.[1]
Typical web pages provide hypertext that includes a navigation bar or a sidebar menu to other web
pages via hyperlinks, often referred to as links.[20]

On a network, a web browser can retrieve a web page from a remote web server, On a higher level,
the web server may restrict access to only a private network such as a corporate intranet or it
provides access to the World Wide Web. On a lower level, the web browser uses the Hypertext
Transfer Protocol (HTTP) to make such requests.[15]

A static web page is delivered exactly as stored, as web content in the web server's file system,
while a dynamic web page is generated by a web application that is driven by server-side software
or client-side scripting. Dynamic website pages help the browser (the client) to enhance the web
page through user input to the server.[2]
 CHAPTER 3

WEBSITE MAKING

THE STEPS TO CREATE A WEB SITE

Creating a web site requires multiple steps which includes the following:

 Creating a UI (User interface)

 Scripting (Both at server end and client end)
 Creating a backend or the database[4]

Fig 3.1
 3.1 UI DEVELOPMENT

Technologies that are mostly used to develop a User Interface are

 HTML
 CSS
 Bootstrap.

3.1.1 HTML
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 webserver
or from local storage and render them into multimedia web [Link] describes the structure
of a web page semantically and originally included cues for the appearance of the document.[10]

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. It 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
using angle brackets. Tags such as < img /> and <input/> introduce content into the page directly.
Others such as <p>…</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.[24]

HTML can embed programs written in a scripting language such as JavaScript which affect 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.[8]

HTML markup consists of several key components, including those called tags (and their
attributes), character-based data types, character references and entity references. HTML tags most
commonly come in pairs <hl> and </hl>, although some represent empty elements and so are
unpaired, for example <img>. The first tag in such a pair is the start tag and the second is the end
tag (they are also called opening tags and closing tags).[8]
Another important component is the HTML document type declaration, which triggers standards
mode rendering.
The following is an example of the classic Hello world program, a common test

employed for comparing programming languages, scripting languages and markup language

This example is made using 9 lines of code.

 General Syntax of HTML

<!DOCTYPE html>

<html>
<head>

<title>This is a title</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

(The text between <html> and </html> describes the web page, and the text between <body>and
</body> is the visible page content. The markup text "<title>This is a title</title>" defines the
browser page title.)

The Document Type Declaration <IDOCTYPE html> is for HTML5. If a declaration

is not included, various browsers will revert to "quirks mode" for rendering.[9]
3.1.2 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language. Although most often used to set the visual style of web
pages and user interfaces written in HTML and XHTML, the language can be applied to any XML
document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on
other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most
websites to create visually engaging webpages, user interfaces for web applications, and user
interfaces for many mobile applications[11]
CSS is designed primarily to enable the separation of presentation and content including aspects
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
HTML pages to share formatting by specifying the relevant CSS in a separate . css file, and reduce
complexity and repetition in the structural content[13]

Separation of formatting and content makes it possible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-
based browser or screen reader), and on Braille-based tactile devices. It can also display the web
page differently depending on the screen size or viewing device. Readers can also specify a
different style sheet, such as a CSS file stored on their own computer, to override one the author
specified.[29]

Changes to the graphic design of a document (or hundreds of documents) can be applied quickly
and easily, by editing a few lines in the CSS file they use, rather than by changing markup in the
documents.

The CSS specification describes 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.[28]

The CSS specification are maintained by the World Wide Web Consortium (W3C) Internet media
type MMIME type) text css is registered for use with CSS by RFC 2318 (March 1998), The W3C
operates a free CSS validation service for CSS documents.

Types of CSS:

Inline CSS

In this CSS is applied in between the tags

Eg: <tag style=”styling">Hello World</tag?

Internal CSS:

In this Thecs code is defined inside the style tag in the head section of the HTML page.

General Syntax:
<html>

<head>

<style>

<! -- CSS STYLING -- >

</style
</head>

</html>

External CSS:

In this the CSS code is written on another page and is linked to the HTML page. I advantageous
to use this type of styling as we can use the same file to style various HTA pages.[16]
External CSS uses the extension .css and is applied using the following syntax

<html>

<head>

<link relation=”stylesheet” type=”css” href=”url to the page”>

</head>

</html>

All the CSS style types are important but can be used in different situations.

Inline CSS is used when only small changes are to be done to the HTML tag and the

changes are to be reflected only to that specific tag.

Internal CSS is used when the individual HTML pages have to be designed differently. This also
slows the page load system if the internal styling is long.

External CSS files are maintained to design multiple pages and use common styles over various
pages. It is useful as it helps in managing the resources in an easy manner.[18]

Both HTML and CSS are used to create a UI but CSS behaves like a makeup on the face of an
actress which makes her look even more beautiful than she is in reality.[9]

And here is the difference:

Before using CSS in HTML page:

*
Email
Password
Login

FIG 3.2
 After using CSS in HTML Page:

Fig:3.3

3.1.3 BOOTSTRAP

Bootstrap is a free and open-source front-end web framework for designing websites and web
applications. It contains HTML- and CSS-based design templates for typography, forms, buttons,
navigation and other interface components, as well as optional JavaScript extensions. Unlike many
web frameworks, it concerns itself with front-end development only.[7]

Bootstrap is the second most-starred project on GitHub, with more than 107, 000 stars and 48, 000
forks.

Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton
at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various
libraries were used for interface development, which led to inconsistencies and a high maintenance
burden. According to twitter developer Mark Otto.[3]

“A super small group of developers and I got together to design and build a new internal tool and
saw an opportunity to do something more. Through that process, we saw ourselves build something
much more substantial than another internal tool. Months later, we ended up with an early version
of Bootstrap as a way to document and share common design patterns and assets within the
company.”[25]
After a few months of development by a small group, many developers at Twitter began to
contribute to the project as a part of Hack Week, a hackathon-style week for the Twitter
development team. It was renamed from Twitter Blueprint to Bootstrap, and released as anopen
source project on August 19, [Link] has continued to be maintained by Mark Otto, Jacob Thornton,
and a small group of core developers, as well as a large community of contributor.[25]

On January 31, 2012, Bootstrap 2 was released, which added a twelve- column responsive grid
layout system, inbuilt support for Glyphicons, several new components, as well as changes to many
of the existing components.

On August 19, 2013, Bootstrap 3 was released, which redesigned components to use flat design,
and a mobile first approach.

On October 29, 2014, Mark Otto announced that Bootstrap 4 was in development. The first alpha
version of Bootstrap 4 was released on August 19.2015.[28]

Bootstrap 3 supports the latest versions of the Google Chrome ,Firefox , Internet Explorer, Opera,
and Safari'(except on Windows), It additionally supports back to IE8 and the latest Firefox
Extended Support Release (ESR).[26]

Since 2.0, Bootstrap supports responsive web design. This means the layout of web pages adjusts
dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile
phone).

Starting with version 3.0, Bootstrap adopted a mobile-first design philosophy, emphasizing
responsive design by default.[20]

The version 4.0 alpha release added Sass and flexbox support.[13]

Installing and linking bootstrap to the HTML page:

Install bootstrap from [Link]

Copy the [Link] file to your CSS folder and link it to the HTML page in the similar
manner to how any other CSS file is linked.

Link the [Link] file which is present in the JS folder of the bootstrap. It can be linked
using script tag.

Eg: <script src="url to [Link]"></script>

Now use bootstrap classes to reduce the work of designing which was earlier done through
CSS.[15]
 3.2 SCRIPTING

There are two scripting methodologies.

Server side scripting: This scripting is done at the server end.

Client side scripting: This scripting is done at the client end or the browser.[9]
3.2.1 SERVER SIDE SCRIPTING

Server-side scripting is a technique used in web development which involve employing scripts on
a web server which produce a response customized for each use (client's) request to the website.
The alternative is for the web server itself to deliver a static available (see below). Server-side
scripting is distinguished from client-side scripting where embedded scripts, such as JavaScript ,
are run client-side in a web browser, but both techniques are often used together.[23]

Server-side scripting is often used to provide a customized interface for the user. These scripts may
assemble client characteristics for use in customizing the response based on those characteristics,
the user's requirements, access rights, etc. Server-side scripting also enables slow down the
experience for the user, place more load on the server, and prevent use of the website owner to
hide the source code that generates the interface, whereas with client-side scripting, the user has
access to all the code received by the client. A down-side to the use of server-side scripting is that
the client needs to make further requests over the network to the server in order to show new
information to the user via the web browser. These requests can application when the user is
disconnected from the server.[5]
When the server serves data in a commonly used manner, for example according to the HTTP or
FTP protocols, users may have their choice of a number of client programs (most modern web
browsers can request and receive data using both of those protocols). In the case of more
specialized applications, programmers may write their own server, client, and communications
protocol that can only be used with one another programs that run on a user's local computer
without ever sending or receiving data over a network are not considered clients, and so the
operations of such programs would not be considered client-side operations.[16]
3.2.2 Server Side scripting Languages

There are several languages that can be used for server-side programming:

 PHP
 [Link](C# OR Visual Basic)
 C+
 Java and JSP
 Python
 Ruby on Rails and so on.[22]
 Programming Language Popularity By Github Projects

Fig:3.4 [12]

3.2.2 CLIENT SIDE SCRIPTING

Client-side scripting is changing interface behaviors within a specific web page in response to
mouse or keyboard actions, or at specified timing events. In this case, the dynamic behavior occurs
within the presentation. The client-side content is generated on the user's local computer system.[6]

Such web pages use presentation technology called rich interfaced pages. Client-side scripting
languages like JavaScript or ActionScript, used for Dynamic HTML (DHTML) and Flash
technologies respectively, are frequently used to orchestrate media types (sound, animations,
changing text, etc.), of the presentation. Client-side scripting also allows the use of remote
scripting, a technique by which the DH TML page requests additional information from a server,
using a hidden frame, XML Http Requests, or a Web service.[31]

The first widespread use of JavaScript was in 1997, when the language w standardized as ECMA
Script and implemented in Netscape 3.[34]
Example:

The client-side content is generated on the client's computer. The web browser retrieves a page
from the server, then processes the code embedded in the page (typically written in JavaScript)
and displays the retrieved page's content to the user.[27]

The most popularly used client side scripting languages is Java Script. [37]

3.3 DATABASE

A database is an organized collection of data. It is the collection of schemas, tables, queries ,

reports, views, and other objects . The data are typically organized to model aspects ot reality in a
way that supports processes requiring information, such as modelling the availability of rooms in
hotels in a way that supports finding a hotel with vacancies.[18]

A database management system (DBMS) is a computer software application that interacts with the
user, other applications, and the database itself to capture and analyze data .A general-purpose
DBMS is designed to allow the definition, creation, querying, update, and administration of
databases, Well-known DBMSs include MySQL , PostgreSQL, MongoDB, MariaDB, Microsoft
SOL Server, Oracle, Sybase, SAP HANA, MySQL and IBM DB2. [32]
database is not generally portable across different DBMSs, but different DBMS can interoperate
by using standards such as SOL and ODBC or JDBC to allow a single application to work with
more than one DBMS. Database management systems are often classify according to the database
model that they supported: the most popular database systems since 1980s have all supported the
relational model as represented by the SQL language. Sometimes a DBMS is loosely referred to
as a "database". [14]
 3.4SQL

Originally based upon relational algebra and tuple relational calculus, SQL consists of a data
definition language, data manipulation language, and data control language. The scope of SQL
includes data insert, query, update and delete, schema creation and modification, and data access
control. Although SQL is often described as, and to a great extent is, a declarative language (4GL),
it also includes procedural elements.[19]

SQL was one of the first commercial languages for Edgar F. Cold relational model, as described
in his influential 1970 paper, "A Relational Model of Data for Large Shared Data Banks." Despite
not entirely adhering to the relational model as described by Codd, it became the most widely used
database language.[11]

SQL became a standard of the American National Standards Institute (ANSI) in 1986, and of the
International Organization for Standardization (ISO) in 1987. Since then, the standard has been
revised to include a larger set of features. Despite the existence of such standards, most SQL code
is not completely portable among different database systems without adjustments.[11]
3.5 QUERIES

The most common operation in SQL, the query, makes use of the declarative SELECT statement.
SELECT retrieves data from one or more tables, or expressions. Standard SELECT statements
have no persistent effects on the database. Some non-standard implementations of SELECT can
have persistent effects, such as the SELECT INTO syntax provided in some databases.[2]

Queries allow the user to describe desired data, leaving the database management system (DBMS)
to carry out planning, optimizing, and performing the physical operations necessary to produce
that result as it chooses.[18]

A query includes a list of columns to include in the final result, normally immediately following
the SELECT keyword. An asterisk ("*") can be used to specify that the query should return all
columns of the queried tables. SELECT is the most complex statement in SQL, with optional
keywords and clauses that include:

 The FROM clause, which indicates the table(s) to retrieve data from. The FROM clause
can include optional JOIN subclauses to specify the rules for joining tables.
 The WHERE clause includes a comparison predicate, which restricts the rows returned by
the query. The WHERE clause eliminates all rows from the result set where the comparison
predicate does not evaluate to True.
 The GROUP BY clause projects rows having common values into a smaller set of rows
GROUP BY is often used in conjunction with SQL aggregation functions or to eliminate
duplicate rows from a result set. The WHERE clause is applied before the GROUP BY
clause.[16]
 The HAVING clause includes a predicate used to filter rows resulting from the GROUP
BY clause. Because it acts on the results of the GROUP BY clause, aggregation functions
can be used in the HAVING clause predicate.[7]
 The ORDER BY clause identifies which column(s] to use to sort the resulting data, and in
which direction to sort them (ascending or descending). Without an ORDER BY clause,
the order of rows returned by an SQL query is undefined. [7]
 The DISTINCT keyword eliminates duplicate data.[7]
 CHAPTER 4
SCRIPTING LANGUAGES
4.1 PHP

Paradigm Imperative, functional, object-oriented, procedural, reflective

Designed by Rasmus Lerdorf
Developer The PHP Development Team, Zend Technologies
First aopearred June 8, 1995; 21 years ago[1]

Stable release 7.1.5/May 11, 2017; 16 days ago

Typing discipline Dynamic, weak, gradual (as of PHP 7.0.0)

Implementation C (primarily; some components C++)
language
OS Unix-like, Windows
License PHP License (most of Zend Engine under Zend Engine License& The
TSRM License)
Filename .php, .phtml, .php3, .php4, .php5, .php7, .phps
Extension
Website [Link]
Major implementations.
Zend Engine. HHVM, Phalanger. Quercus, Project Zero, Parrot
Influenced by
C++, C, Java, Perl, Tel
Influenced
Falcon, Hack

PHP is a server-side scripting language designed primarily for web development but also used as
a general-purpose programming language. Originally created by Rasmus Lerdorf in 1994, the PHP
reference implementation is now produced by The PHP Development Team .PHP originally stood
for Personal Home Page, but it now stands for the recursive acronym PHP: Hypertext
Preprocessor.[17]

PHP code may be embedded into HTML or HTMLS markup, or it can be used in combination with
various web template systems, web content management systems and web frameworks, PHP code
is usually processed by a PHP interpreter implemented as a module in the web server or as a
Common Gateway Interface (CGI) executable. The web server software combines the results of
the interpreted and executed PHP code, which may be any type of data, including images, with the
generated web page. PHP code may also be executed with a command-line interface (CLI) and can
be used to implement standalone graphical applications.[21]

The standard PHP interpreter, powered by the Zend Engine, is free software released under the
PHP License. PHP has been widely ported and can be deployed on most web servers on almost
every operating system and platform, free of charge.[26]

The PHP language evolved without a written formal specification or standard untl 2014, leaving
the canonical PHP interpreter as a de facto standard. Since 2014 work has go on to create a formal
PHP specification.[9]

4.2 Installing PHP

I. Step I: download the files. Download the latest PHP S ZIP package from
[Link]/[Link]
II. Step 2:extract the files.
III. Step 3:configure [Link].
IV. Step 4: add C: php to the path environment variable.
V. Step 5:configure PHP as an Apache module.
VI. Step 6: test a PHP file.
VII. Or we can install XAMPP which have inbuilt php,mysl, apache server [2]

We have used XAMPP to run the php files.

Fig4.1.1
 4.3 JAVA SCRIPT

Javascript, often abbreviated as "Js", is a high-level, dynamic, untyped, and interpreted run-time
language. It has been standardized in the ECMAScript language specification. Alongside HTML
and CSS, JavaScript is one of the three core technologies of World Wide Web content production;
the majority of websites employ it, and all modern Web browsers support it without the need for
plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm
language, supporting object-oriented, imperative, and functional programming styles. It has an API
for working with text, arrays, dates and regular expressions, but does not include any /O, such as
networking, storage, or graphics facilities, relying for these upon the host environment in which it
is embedded.

Although there are strong outward similarities between JavaScript and Java, including language
name, syntax, and respective standard libraries, the two are distinct languages and differ greatly in
their design. JavaScript was influenced by programming languages such as self and Scheme.

JavaScript is also used in environments that are not Web-based, such as PL documents, site-specific
browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMS) and
platforms built upon them have also increased the popularity of JavaScript for server-side Web
applications. On the client side, developers have traditionally implemented JavaScript as an
interpreted language, but more recent browsers perform just-in-time compilation. Programmers
also use JavaScript in video-game development, in crafting desktop and mobile applications, and
in server-side network programming with run-time environments such as [Link].

4.4 JQUERY
JQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of
HTML. It is free, open-source software using the permissive MIT license. Web analysis indicates
that it is the most widely deployed JavaScript library by a large margin.[31]

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create
animations, handle events, and develop Ajax applications. jQuery also provides capabilities for
developers to create plug ins on top of the JavaScript library. This enables developers to create
abstractions for low-level interaction and animation, advanced effects and high-level, themeable
widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web
pages and Web applications.[30]

The set of jQuery core features-DOM element selections, traversal and manipulation enabled by
its selector engine (named "Sizzle" from v1.3), created a new "programming style", fusing
algorithms and DOM data structures. This style influenced the architecture of other JavaScript
frameworks like YUI v3 and Dojo, later stimulating the creation of the standard Selectors API.[26]
Microsoft and Nokia bundle jQuery on their platforms. Microsoft includes it with Visual Studio
for use within Microsoft's [Link] AJAX and [Link] MVC frameworks while Nokia has
integrated it into the Web Run-Time widget development platform.[18]

4.5 AJAX

Ajax (also AJAX short for "asynchronous JavaScript and XML") is a set of Web development
techniques using many Web technologies on the client side to create asynchronous Web
applications. With Ajax, Web applications can send data to and retrieve from a server
asynchronously (in the background) without interfering with the display and behavior of the
existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows
for Web pages, and by extension Web applications, to change content dynamically without the
need to reload the entire page. In practice, modern implementations commonly substitute JSON
for XML due to the advantages of being native to JavaScript.[14]
Ajax is not a single technology, but rather a group of technologies. HTML and CSS be used in
combination to mark up and style information. The DOM is accessed with JavaScript to
dynamically display – and allow the user to interact with – the information presented. JavaScript
and the XML HttpRequest object provide a method for exchanging data asynchronously between
browser and server to avoid full page reloads.[14]

4.6 JSON

In computing, JavaScript Object Notation or JSON (/' dzerson/JAY-san), is an open-standard file

format that uses human-readable text to transmit data objects consisting of attribute-value pairs
and array data types (or any other serializable value). It is a very common data format used for
asynchronous browser/'server communication, including as a replacement for XML in some
AJAX-style systems.[8]

JSON is a language-independent data format . It was derived from JavaScript, but as of 2017 many
programming languages include code to generate and parse JSON-format data. The official
Internet media type for JSON is application/json. JSON filenames use the extension json.[34]

Douglas Crockford originally specified the JSON format in the early 20003; two competing
standards, RFC 7159 and ECMA-404, defined it in 2013. The ECMA standard describes only the
allowed syntax, whereas the RFC covers some security and interoperability considerations.[8]

A restricted profile of JSON, known as I-JSON (short for"Internet JSON"), seeks to overcome
some of the interoperability problems with JSON. It is defined in RFC 7493.[12]

4.7 XAMPP

XAMPP is a free and open source cross platform web server solution stack package developed by
Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and
interpreters for scripts written in the PHP and Perl programming languages. XAMPP stands for
Cross-Platform (X), Apache (A), MariaDB (M), PHP (P) and Perl (P). It is a simple, lightweight
Apache distribution that makes it extremely easy for developers to create a local web server for
testing and deployment purposes. Everything needed to set up a server - server application
(Apache), database (MariaDB), and scripting language (PHP).included in an extractable file.
XAMPP is also cross-platform, which means it works equal, well on Linux, Mac and Windows.
Since most actual web server deployments use the same components as XAMPP, it makes
transitioning from a local test server to a live server extremely easy as well.[37]

4.8 FEATURES

XAMPP is regularly updated to the latest releases of Apache, MariaDB, PHP and Perl. It also
comes with a number of other modules including OpenSSL, phpMyAdmin, Media Wiki , Joomla,
WordPress and more. Self-contained, multiple instances of XAMPP can exist on a single computer,
and any given instance can be copied from one computer to another. XAMPP is offered in both a
full and a standard version (Smaller version).[36]

4.9 USAGE
Officially, XAMPP's designers intended it for use only as a development tool, to allow website
designers and programmers to test their work on their own computers without any access to the
Internet. To make this as easy as possible, many important security features are disabled by default.
XAMPP has the ability to serve web pages on the World Wide Web. A special tool is provided to
password-protect the most important parts of the package.[34]

XAMPP also provides support for creating and manipulating databases in MariaDB and SQLite
among others. Once XAMPP is installed, it is possible to treat a localhost like a remote host by
connecting using an FTP client. Using a program like FileZilla has many advantages when
installing a content management system (CMS) like Joomla or WordPress It is also possible to
connect to localhost via FTP with an HTML editor.[36]
 CHAPTER 5
SOFTWARE REQUIREMENT SPECIFICATION

5.1 Hardware Requirements

The selection of hardware is very important in the existence and proper working of any software.
When selecting hardware, the size and requirements are also important.[32]
 CHAPTER 6
DATA FLOW DIAGRAM

Data Flow Diagrams show the flow of data from external entities into the system, and from
one process to another within the system. [34] There are four symbols for drawing a DFD:

i. Rectangles representing external entities, which are sources or destinations of data.

ii. Ellipses representing processes, which take data as input, validate and process it and output
it.
iii. Arrows representing the data flows, which can either, be electronic data or physical items.
iv. Open-ended rectangles or a Disk symbol representing data stores, including electronics
stores such as databases or XML files and physical stores such as filing cabinets or stacks
of paper.

Figures below are the Data Flow Diagrams for the current system. Each process within the system
is first shown as a Context Level DFD and later as a Detailed DFD. The Context Level DFD
provides a conceptual view of the process and its surrounding input, output and data stores. The
Detailed DFD provides a more detailed and comprehensive view of the interaction among the sub-
processes within the system.[14]
Fig 6.2.2 [8]
 CHAPTER 7
METHODOLOGIES
7.1 PROJECT

Name: Bookz Kart

7.2 Technologies Used:

• HTML- HTML stands for Hyper Text markup Language,used for making websites.[33]
• CSS- It stands for Cascading Styling Sheets, used for design the layout and fonts. .[33]
• Bootstrap- A popular CSS framework, provides responsive design. .[33]
• Core PHP- It is used to Dynamic webpages without any frameworks. .[33]
• Java Script- Scripting language used to make webpages interactive web browsers. .[33]
• Jquery- A light- weight Javascript that simplifies HTML DOM manipulation.[33]
• AJAX- A technique that allow webpages to send and receive data without reloading.[33]

Server: Apache (XAMPP)

Database: MySql

Operating System: Windows7/8/8.1/10

Wire framing tool: Balasmiq

7.3 TECHNICAL DETAILS:

 Front end is designed using HTML, CSS and Bootstrap. Ajax used to perform behind the
screen requests and JavaScript used to perform client side scripting.
 Backend is based on PHP + My Sql based RDB (Relational Data Base) model.
 The SQI queries are run using the CT SQL, library functions.
 Backend online host includes a centralized database resident on the server, the script which
is built in PHP used to SQL query the database on user's request for transaction of data.
 The forms are made using the HTML, Bootstrap for designing and Php, sql for back-end.
INTERFACE
 CHAPTER 8
CONCLUSION
The maintenance phase involves making changes to hardware, software, a documentation to
support its operational effectiveness. It includes making changes to improve a system's
performance, correct problems, enhance security, or address user requirements. To ensure
modifications do not disrupt operations or degrade a system's performance or security,
organizations should establish appropriate change management standards and procedures.[35]

Routine changes are not as complex as major modifications and can usually be implemented in the
normal course of business. Routine change controls should include procedures for requesting,
evaluating, approving, testing, installing, and documenting website modifications .Maintaining
accurate, up-to-date hardware and software inventories is a critical part of all change management
processes. Management should carefully document all modifications to ensure accurate system
inventories. Management should coordinate all technology related changes through an oversight
committee and assign an appropriate party responsibility for administering software patch
management programs. Quality assurance, security, audit, regulatory compliance, network, and
end-user personnel should be appropriately included in change management processes. Risk and
security review should be done whenever a system modification is implemented to ensure controls
remain in place.[23]

For maintenance of the website-

[Link] database has to be updated regularly according to new available information.

[Link] and false information must be removed from the database.

[Link] version of PHP and MYSQL can be used for up gradation of website and to improve the
overall performance of the system.[17]

9.1 FUTURE SCOPE & FUTURE ENHANCEMENT

 Bookz Kart would help each and every person to find any book via our website and get it
at home it will save their time.
 It would provide huge collection of books of all fields
 Students will also get audio/video series of courses, i.e. they can learn online/offline
 I will be providing some special courses both online and offline.
 References

[1] Agarwal, R., & Venkatesh, V. (2020). Consumer behavior in digital environments:
The evolution of online shopping and its psychological determinants. Journal of Electronic
Commerce Studies, 11(2), 45–72.

[2] Ahmad, N., & Khan, M. S. (2019). Design patterns and architectural principles for
scalable e-commerce solutions. International Journal of Software Engineering Research,
8(3), 112–130.

[3] Alam, S. S., & Yasin, N. M. (2017). The role of trust in online purchasing behavior:
A study of e-commerce adoption. Business and Information Systems Quarterly, 10(4), 33–
49.

[4] Ali, A., & Khan, R. (2021). Responsive UI design techniques for modern web
applications. International Journal of Web Engineering, 14(1), 101–123.

[5] Allen, K., & Harris, D. (2018). Mobile-first design: Principles, practices, and
performance considerations. Journal of Interactive Design, 22(1), 76–94.

[6] Anderson, P. (2020). JavaScript frameworks and their role in modern web
development. Software Development Review, 9(1), 52–69.

[7] Arora, S., & Bajaj, K. (2022). User experience optimization strategies in digital
retail interfaces. UX Research International, 5(3), 88–108.

[8] Batra, R., & Patil, M. (2020). Full stack development essentials: An integrated
approach for building dynamic websites. Tech World Publications.

[9] Berman, S. J. (2019). Real-time analytics in digital commerce: Enhancing customer

decision-making. Journal of Data-Driven Business, 7(2), 14–29.

[10] Bhatt, G. (2021). Secure authentication systems in web applications: Techniques

and vulnerabilities. Cybersecurity and Digital Forensics Review, 3(1), 91–118.

[11] Bose, R. (2018). Web engineering methodologies for dynamic application

development. Springer Publishing.

[12] Brown, T. (2017). Principles of modern UX design. Interactive Interface Journal,

3(2), 22–35.

[13] Bryson, M., & Kelly, R. (2021). Data modeling techniques for scalable e-commerce
systems. Database Engineering Quarterly, 29(3), 41–60.
[14] Chakraborty, S., & Roy, A. (2020). Adoption of cloud computing in e-commerce
infrastructures. International Journal of Cloud Systems, 6(4), 19–39.

[15] Chandra, R., & Saxena, K. (2019). XML and AJAX in data handling for interactive
web applications. Journal of Web Data Engineering, 11(5), 89–104.

[16] Chen, L., & Lee, S. (2022). Artificial intelligence for personalized online shopping:
An empirical review. AI in Business Review, 8(1), 54–78.

[17] Cheng, H. (2021). Secure transaction processing in online retail platforms. Journal
of Digital Commerce Security, 5(2), 44–67.

[18] Choudhury, A. (2019). Fundamentals of web technologies: HTML5, CSS3, and

JavaScript. Elite Tech Press.

[19] Cohen, P. (2020). Backend system architectures for e-commerce scalability.

Software System Architecture Journal, 4(1), 37–58.

[20] D’Souza, M., & Jacob, R. (2018). Impact of UI consistency on user satisfaction in
online shopping. Consumer Interaction Review, 6(2), 109–127.

[21] Das, A. (2021). Practical guide to MySQL database design. Global Tech Books.

[22] Dawson, C. (2019). RESTful API development principles and best practices.
International Web Service Engineering Journal, 12(4), 77–93.

[23] Deshmukh, P. (2020). Software testing principles for web-based applications.

Pioneer Publications.

[24] Dutta, S. (2021). Analysis of modern CSS frameworks for responsive design. Web
Design Technology Review, 8(3), 24–51.

[25] Edwardson, K. (2020). Cloud deployment workflows for full-stack web

applications. International Journal of DevOps Engineering, 15(4), 66–94.

[26] Elangovan, K. (2018). SQL query optimization techniques. Database Optimization

Review, 19(2), 55–74.

[27] Fisher, R., & Grant, P. (2019). Cybersecurity strategies for protecting e-commerce
data. Digital Safety and Encryption Journal, 7(1), 101–133.

[28] Garg, N., & Yadav, P. (2020). Online consumer behavior: An empirical perspective.
Asian Journal of E-Business, 3(2), 15–33.

[29] Ghahramani, Z. (2019). Machine learning models for product recommendation.

Journal of Intelligent Computation, 10(3), 92–118.
[30] Goyal, A., & Bhandari, K. (2021). Cloud-native applications and distributed
architecture patterns. Tech Science Press.

[31] Gupta, R. (2020). JavaScript ES6 features and modern development practices.
Programming Trends Journal, 22(1), 69–93.

[32] Harris, M., & Knight, D. (2021). Microservices and their role in scalable web
architectures. Cloud Application Engineering Review, 9(4), 30–56.

[33] Hoffman, E. (2019). UI/UX design foundations and interface psychology. Pearson
Education.

[34] Johnson, B. (2020). Advanced CSS techniques for interactive web design. Web Style
Quarterly, 13(1), 48–70.

[35] Kamble, A. (2017). Introduction to database management systems. Universal

Publication House.

[36] Kapoor, S. (2019). E-commerce business intelligence systems: A comprehensive

study. Retail Technology Review, 11(2), 81–104.

[37] Kar, D., & Patnaik, S. (2022). An overview of front-end performance optimization.
Web Engineering Review, 17(1), 16–37.
 Appendix
A.1 Detailed Requirement Documentation
The requirement documentation conducted during the initial stages of the Urban Attire project
played an essential role in shaping the system’s design, architecture, and development strategy.
This document provides an extended and comprehensive description of all collected requirements,
including behavioura patterns, customer needs, business goals, and technical constraints.

During the early stages, the system requirements were captured through a combination of
comparative analysis of existing e-commerce platforms, assumption-based user modelling, and
functional breakdown of standard online retail processes. The primary focus was to ensure that the
platform would support every essential task a user would expect from a digital fashion store such
as product exploration, category browsing, cart management, and checkout workflows.

The functional requirements captured included user login, account creation, password
management, product search functionality, smooth navigation, dynamic product listing, responsive
layout behaviour, secure handling of form inputs, and the ability for users to place orders. Each
functional requirement was evaluated for complexity, technical feasibility, and integration needs.
Non-functional requirements such as scalability, security, reliability, performance, user interface
clarity, and cross-platform compatibility were also added to ensure long-term sustainability of the
system.

Another key component of requirement documentation involved analysing customer expectations

such as the desire for visually appealing layouts, quick loading, minimal redirections, intuitive
workflows, and error-free data responses. These insights acted as guiding principles during
development. User behaviour patterns collected from studying popular fashion websites were
incorporated into the requirement set to enhance the realism and practical relevance of the final
system.

A.2 Use-Case Narratives

Use-case studies helped reveal how users interact with the Urban Attire platform in real-life
scenarios. The narratives were developed with a focus on understanding user intentions, goals, and
the sequence of actions that occur during each interaction.

One of the primary use cases focused on a new customer visiting the website for the first time. The
user begins by landing on the homepage, observing banner sections, scanning through product
categories, and gradually navigating deeper into the platform. The next stage includes viewing
product details, exploring colour or size variants, and adding selected items into the cart. The
narrative continues by detailing how the system responds to each click — updating cart counts,
validating size selections, and displaying structured information that helps the user proceed
confidently through the purchase process.
Another extended use-case captured the returning user scenario. This narrative explored the login
process, remembering cart items, re-loading personalised recommendations, viewing previous
order history, and interacting with saved preferences. This narrative helped developers refine the
system’s backend logic to ensure continuity in user experience during repeated visits.

Additional narratives documented the administrator’s perspective, such as managing product

listings, updating inventory records, modifying price tags, and maintaining accurate category
structures. These narratives, although not fully implemented in the prototype, demonstrate the
possibility for future multi-vendor or admin functionality.

A.3 Screenshot Descriptions of Interface Pages

Homepage Description

The homepage is designed with a visually appealing hero banner that instantly draws user
attention. It features a centrally aligned navigation bar with menu categories such as Men, Women,
Accessories, New Arrivals, and Sale. Beneath the banner, multiple rows of trending outfits appear
with neatly organized grid layouts. Each product card has high-quality imagery, readable labels,
and easily identifiable prices.

Product Listing Page Description

The listing page includes a responsive grid that rearranges itself depending on screen width. Each
product tile consists of the product image, brand name, price, and discount percentage. Hover
effects show additional details such as alternative views or quick-add buttons, enabling faster cart
interactions.

Product Detail Page Description

The product detail page features a large preview image, right-aligned details, size selectors, and a
descriptive information section. Additional descriptions shown below include material type, fabric
quality, washing instructions, and model specifications. The page offers a clean comparison of
price, discount, availability, and shipping details.

Cart Interface Description

The cart page displays added items with thumbnails, quantity controls, removal options, and an
automatically calculated subtotal. A summary box at the right displays totals, discounts, taxes (if
applicable), and a final payable amount.
 A.4 Testing Log Sheets
A detailed testing log was maintained throughout the project to ensure quality, stability, and
smooth function across all modules.

Functional Testing Log

The functional testing process evaluated each feature individually. For example, testing the login
module involved attempting both valid and invalid credential combinations, testing forgotten
password redirects, validating input formats, and checking form behaviours under different
network conditions. The product search module was tested using keywords, partial text, category
selections, and edge-case search inputs to ensure the system handles all scenarios gracefully.

Usability Testing Log

Usability tests were conducted by asking individuals to navigate the system without assistance.
Observations included confusion points, click delays, misunderstandings about button placements,
and misinterpretations of icons or UI elements. The homepage and product listing sections went
through multiple iterations after identifying unnecessary clutter, misaligned elements, or unclear
visual hierarchy.

Performance Testing Log

Performance tests were simulated by repeatedly loading pages, analysing rendering times, and
observing how quickly data-loaded components appeared. Although full-scale load testing was not
performed, simulated scenarios helped identify cases where image files needed size reduction or
where certain JavaScript functions required optimisation.

Error and Bug Tracking Log

Throughout development, bugs such as broken links, incorrect data responses, inconsistent
spacing, overlapping elements, or missing product fields were documented in a structured error
log. Each issue was assigned a priority level, analysed for root cause, resolved, then retested before
marking completion.

A.5 Deployment Notes

The deployment process required preparing the frontend files, configuring backend routes, and
connecting the database. Before deployment, all relative paths were verified, image assets were
compressed, and environment variables were prepared for server compatibility.

Deployment configuration included setting up security headers, enabling CORS policies where
necessary, and testing route consistency. The server was briefly monitored to ensure stability
during initial page load events.
 A.6 Learning Outcomes
The Bookz kart project was highly beneficial academically and professionally. Through the
development process, key areas of improvement included enhancing logical thinking, mastering
frontend structuring, understanding user-centric design approaches, handling backend processing
concepts, and becoming familiar with debugging strategies. Exposure to real e-commerce
workflows also improved technological adaptability, problem-solving techniques, and analytical
skills required for future professional roles.