1.

INTRODUCTION

1.1 OVERVIEW

Newchic is an online fashion retailer offering a wide range of clothing, accessories, and beauty products for
men and women. The website features a diverse selection of trendy and affordable items, including apparel,
shoes, bags, and jewelry. Newchic also provides a platform for independent designers to showcase their
creations. The site is known for its frequent promotions, discounts, and flash sales, making it an attractive
destination for budget-conscious shoppers. With a user-friendly interface and global shipping options,
Newchic aims to provide a convenient and enjoyable shopping experience for customers around the world.

1.2 SCOPE

Online Shopping System

The goal of this work is to provide user with a interface that can make user easy to use and place a product
of the merchant by using online payment gateway for reliable and secure online transactions

Newchic Scope

Newchic aims to develop a user-friendly platform for local communities, facilitating easy product placement
from merchants. Integration of a secure online payment gateway ensures reliable transactions. The scope
extends to community engagement through forums and local event listings, enhancing the overall shopping
experience.

Student Registration Scope

Student Registration in Newchic streamlines onboarding, providing a quick and secure process. The scope
includes personalized recommendations and exclusive discounts, enhancing the student experience. Beyond
registration, the feature fosters community engagement through forums and events, creating a sense of
belonging within the Newchic community.

1.2 Objective

Online Shopping System

Newchic is an e-commerce platform that aims to provide a diverse range of affordable and trendy fashion,
accessories, and home goods to a global customer base. The website's objective is to offer customers a
convenient and enjoyable shopping experience, with a focus on quality, affordability, and the latest fashion
trends. Newchic strives to create a one-stop destination for individuals seeking stylish and budget-friendly
products, while also prioritizing customer satisfaction through efficient service and a user-friendly interface.

1
Newchic Objective

Newchic's objective is to establish an intuitive online platform for local communities, facilitating seamless
product placement by merchants. The primary goal is to integrate a secure online payment gateway,
ensuring reliable transactions. Additionally, newchic aims to foster community engagement through forums
and local event listings, enriching the user experience.

Student Registration Objective

The Student Registration feature in Newchic aims to streamline onboarding for students, providing a quick
and secure process. The primary objective is to enhance the student experience through personalized
recommendations and exclusive discounts. Beyond registration, the feature seeks to foster community
engagement via forums and events, fostering a sense of belonging

1.3 EXISTING SYSTEM

The existing Newchic website is a well-designed and functional website. However, there are a few areas
where the website could be improved. For example, the website could be made more user-friendly by
simplifying the checkout process and making it easier for customers to find the products they are looking
for. Additionally, the website could be made more visually appealing by using more modern design
elements.

 The Newchic website has a number of features that make it a user-friendly and convenient shopping
destination. These features include:

 A robust search engine that allows you to quickly and easily find the products you are looking for.

 A user-friendly design that makes it easy to navigate the website and find the products you are
looking for.

 A variety of payment options, including credit and debit cards, PayPal, and wire transfer.

 Free shipping on orders over a certain amount.

 Shipping to over 200 countries around the world.

 However, there are a few areas where the existing Newchic website could be improved

1.4 PROPOSED SYSTEM

2
The proposed system for the Newchic website addresses the shortcomings of the existing system and introduces
several enhancements to improve the overall user experience and drive business growth

1.5.1 Simplified Checkout Process

The current checkout process involves multiple steps and requires users to enter various details, making it
cumbersome and time-consuming. The proposed system streamlines the checkout process by reducing the number of
steps, minimizing data entry, and providing faster payment options. This simplified checkout process will enhance
user convenience and encourage more customers to complete their purchases.

1.5.2 Enhanced Search Engine

The existing search engine sometimes struggles to provide accurate and relevant results, leading to
frustration for users seeking specific products. The proposed system incorporates a more sophisticated
search engine algorithm that utilizes advanced natural language processing techniques and machine learning
to better understand user intent and deliver more relevant search results. This enhanced search engine will
significantly improve the user experience by quickly guiding customers to the products they desire.

1.5.3 Modern Design Elements

The current website's design, while functional, lacks a modern aesthetic that appeals to contemporary users.
The proposed system revamps the website's design using a modern design framework that emphasizes clean
lines, intuitive navigation, and visually appealing elements. This modern design will enhance the website's
visual appeal, attract new users, and improve overall brand perception.

1.5.4 Personalized Recommendations Engine

To provide a more personalized shopping experience, the proposed system introduces a recommendation
engine that utilizes machine learning algorithms to analyze user behavior, including past purchases,
browsing history, and product preferences. This engine will generate personalized product
recommendations, suggesting items that align with each user's individual interests and preferences. This
personalized approach will enhance customer engagement, increase the likelihood of product discovery, and
boost sales.

1.5.5 Mobile App

To cater to the growing mobile user base, the proposed system includes the development of a native mobile
app for the Newchic website. This mobile app will provide a seamless and optimized shopping experience
for users accessing the website from their smartphones or tablets. The app will offer all the functionalities of
the website, including browsing, product search, account management, and secure payment options. This
3
mobile app will expand Newchic's reach to a wider audience, enhance user convenience, and increase sales
opportunities.

1.6 METHODOLOGIES

1.6.1 Introduction To Html

Frames allow an author to divide a browser window into multiple (rectangular) regions. Multiple documents
can be displayed in a single window, each within its own frame. Graphical browsers allow these frames to
be scrolled independently of each other, and links can update the document displayed in one frame without
affecting the others. You can’t just “add frames” to an existing document. Rather, you must create a
frameset document that defines a particular combination of frames, and then display your content documents
inside those frames. The frameset document should also include alternative non-framed content in a
NOFRAMES element. An HTML comment begins with “ “, and does not contain “–“ or “>” anywhere in
the comment. A hypertext link is a special tag that links one page to another page or resource. If you click
the link, the browser jumps to the link’s destination.

According to HTML standards, each HTML document begins with a DOCTYPE declaration that specifies
which version of HTML the document uses. Many browsers use the document’s DOCTYPE declaration to
determine whether to use a stricter, more Introduction E-commerce website standards oriented layout mode,
or to use a “quirks” layout mode that attempts to emulate older, buggy browsers.

A table can be embedded inside a cell in another table. The main caveat about nested tables is that older
versions of Netscape Navigator have problems with them if you don’t explicitly close you TR, TD, and TH
elements. To avoid problems, include closing tags for you TR, TD, an TH even though the HTML
specifications don’t require them. You use the
property to float a table to the right. Put left in place of right to float right.

XHTML (Extensible Hyper text markup language)

Late 1990’s XHTML 1.0 started by w3c which was a version of HTML that used stricter XML syntax rules.
XHTML has strict rules to make page rendering more predictive Table by forcing authors to create web
page without syntax errors.
HTML5
A group of developers at opera and Mozilla formed the WHATWG (web hypertext application technology
working group with in the w3c WHATLOG, HTML5 adopted Instead of XHTML 2.0 by 2009 which has
three aims
4
i. Specify unambiouously how browsers should deal with invalid markup.
ii. Provide an open non proprietary programming framework.
iii. Be backward compilable with the existing web

1.6.2 Introduction To Css

Cascading Style Sheets called (CSS) is a list of statements (or rules) that can assign various rendering
properties to HTML elements. Style rules can be specified for a single element occurrence, multiple
elements, and entire document, or even multiple documents at once. Class is a group of instances of the
same element to which a unique style can be attached. Grouping means gathering into a comma separated
list two or more selectors that share the same style or into a semicolon separated list two or more
declarations that are attached to the same selector.
ID selector is an individually identified (named) selector to which a specific style is declared. Using
the ID attribute, the declared style can then be associated with one and only one HTML element per
document as to differentiate it from all the other elements. They use the # character followed by a name. A
contextual selector addresses a specific occurrence of an element. It is a string of individual selectors
separated by white space, a search pattern, where only the last element in the pattern is addressed providing
it matches the specified context. Example: “ td li {color: red} “ .
CSS allows Unicode characters to be entered by number. For example, if a class value in some
Russian document contains Cyrillic letters EL PE (Unicode numbers 041B and 041F) and you want to write
a style rule for that class, you can put that letter into the style sheet by writing: {font-style: italic;} This
works on all keyboards, so you don’t need a Cyrillic keyboard to write class names in Russian or another
language that uses that script.

Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. font or width.
There must always be a corresponding value or values set to each property. The CSS clear property
specifies which sides of an element where other floating elements are not allowed. This method cannot
control styles for multiple documents at once. Inline Style Advantages Useful for small quantities of style
definitions. Can override other style specification methods at the local level so only exceptions need to be
listed in conjunction with other style.

1.6.3 Introduction To Bootstrap

Mark Otto announced Bootstrap 4 on October 29, 2014.[9] The first alpha version of Bootstrap 4 was
released on August 19, 2015.[10] The first beta version was released on 10 August 2017. Mark suspended
work on Bootstrap 3 on September 6, 2016, to free up time to work on Bootstrap 4. Bootstrap 4 was
5
finalized on January 18, 2018.
Significant changes include:
 Major rewrite of the code
 Replacing Less with Sass
Addition of Reboot, a collection of element-specific CSS changes in a single file, based on
Normalize
 Dropping support for IE8, IE9, and iOS 6
 CSS Flexible Box support
 Adding navigation customization options
 Adding responsive spacing and sizing utilities
 Switching from the pixels unit in CSS to root ems
 Increasing global font size from 14px to 16px
 Dropping the panel, thumbnail, pager, and well components
 Dropping the Glyphicons
 Huge number[quantify] of utility classes
 Improved form styling, buttons, drop-down menus, media objects and image classes

Bootstrap 4 supports the latest versions of Google Chrome, Firefox, Internet Explorer, Opera, and Safari
(except on Windows). It additionally supports back to IE9 and the latest Firefox Extended Support Release
(ESR). Bootstrap is a web framework that focuses on simplifying the development of informative web
pages (as opposed to web apps). The primary purpose of adding it to a web project is to apply Bootstrap's
choices of color, size, font and layout to that project. As such, the primary factor is whether the developers
in charge find those choices to their liking. Once added to a project, Bootstrap provides basic style
definitions for all HTML elements. The result is a uniform appearance for prose, tables and form elements
across web browsers. In addition, developers can take advantage of CSS classes defined in Bootstrap to
further customize the appearance of their contents. For example, Bootstrap has provisioned for light- and
dark-colored tables, page headings, more prominent pull quotes, and text with a highlight.
Bootstrap also comes with several JavaScript components in the form of jQuery plugins. They provide
additional user interface elements such as dialog boxes, tooltips, and carousels. Each Bootstrap component
consists of an HTML structure, CSS declarations, and in some cases accompanying JavaScript code. They
also extend the functionality of some existing interface elements, including for example an auto-complete
function for input fields. The most prominent components of Bootstrap are its layout components, as they
affect an entire web page. The basic layout component is called "Container", as every other element in the

6
page is placed in it. Developers can choose between a fixed-width container and a fluid-width container.
1.6.4 Introduction To Javascript

JavaScript often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the
ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-
orientation, and first-class functions. Alongside HTML and CSS, JavaScript is one of the core technologies
of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web
applications. The vast majority of websites use it, and major web browsers have a dedicated JavaScript
engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative

(including object-oriented and prototype-based) programming styles. It has APIs for working with text,
arrays, dates, regular expressions, and the DOM, but the language itself does not include any I/O, such as
networking, storage, or graphics facilities. It relies upon the host environment in which it is embedded to
provide these features. JavaScript supports much of the structured programming syntax from C (e.g., if
statements, while loops, switch statements, do while loops, etc.). One partial exception is scoping:
JavaScript originally had only function scoping with var. Like C, JavaScript makes a distinction between
expressions and statements. One syntactic difference from C is automatic semicolon insertion, which allows
the semicolons that would normally terminate statements to be omitted.

JavaScript is dynamically typed like most other scripting languages. A type is associated with a
value rather than an expression. For example, a variable initially bound to a number may be reassigned to a
string. JavaScript supports various ways to test the type of objects, including duck typing. JavaScript
includes an eval function that can execute statements provided as strings at run-time.

JavaScript is almost entirely object-based. In JavaScript, an object is an associative array,

augmented with a prototype (see below); each string key provides the name for an object property, and there
are two syntactical ways to specify such a name: dot notation (obj.x = 10) and bracket notation (obj['x'] =
10). A property may be added, rebound, or deleted at run-time. Most properties of an object (and any
property that belongs to an object's prototype inheritance chain) can be enumerated using a for...in loop.

JavaScript uses prototypes where many other object-oriented languages use classes for inheritance.
It is possible to simulate many class-based features with prototypes in JavaScript. Like many scripting
languages, arrays and objects (associative arrays in other languages) can each be created with a succinct
shortcut syntax. In fact, these literals form the basis of the JSON data format. JavaScript also supports
regular expressions in a manner similar to Perl, which provide a concise and powerful syntax for text
manipulation that is more sophisticated than the built-in

7
 2. LITERATURE SURVEY

The aim of this project is on the online shopping application it is developed using HTML5, JavaScript, CSS,
PHP, Bootstrap 4. The application is very useful where the buyer can directly buy the products from home
via internet on mobile or system. The application reduces lot of work load for customer as well as owner.
The transaction of money is completed in real time system. By this online shopping the product is directly
delivered to customer home. Online shopping is the process consumers go through to purchase products or
Services over the Internet. An online shop, e-shopping, e-store, internet shop, webshop, web store , online
store or virtual store evokes the physical analogy of buying products or services at a bricks-and-mortar
retailer or in a mall. The metaphor of an online catalog is also used, by analogy with mail order catalogs.
Online shopping is a type of electronic commerce used for business-to-business(B2B) and business-to-
consumer transactions. The term Web shop also refers to a place of business where web development, web
hosting and other types of web related activities take place (Web refers to the World Wide Web and "shop"
has a colloquial meaning used to describe the place where one's occupation is carried out).

2.1 Introduction to E-Commerce and Online Shopping

2.1.1 Overview of E-Commerce

The e-commerce industry has witnessed unprecedented growth over the past decade, transforming the way
consumers shop. With the advent of technology, online shopping has become a convenient and accessible
option for customers globally.

2.1.2 Significance of Online Shopping Platforms

Online shopping platforms offer a wide range of products, providing customers with a diverse and
convenient shopping experience. The shift to online retail has been driven by factors such as convenience,
variety, and the ability to compare prices and reviews.

2.1.3 New Chic in the Online Shopping Landscape

As a major player in the online shopping domain, New Chic has carved a niche for itself by offering a
8
diverse range of products, competitive pricing, and a user-friendly interface.

2.2 Evolution and Growth of New Chic

2.2.1 Founding and Establishment

New Chic was founded in [year] and has since grown into a well-established online retail brand. The
company's journey began with a focus on [specific products or niche].

2.2.2 Growth Milestones

Highlight key milestones in New Chic's journey, such as expansions into new markets, strategic
partnerships, or any notable achievements. This showcases the company's resilience and adaptability.

2.3 Business Model and Unique Selling Proposition (USP) of New Chic

2.3.1 Business Model

New Chic operates on a [describe business model - e.g., marketplace, direct-to-consumer]. Analyze how this
model contributes to the company's success and competitiveness.

2.3.2 Unique Selling Proposition

Identify and elaborate on New Chic's unique selling points. This could include exclusive deals, high-quality
products, competitive pricing, or exceptional customer service.

2.3.3 Market Positioning

Discuss how New Chic positions itself in the market. Analyze the target audience and how the brand caters
to specific consumer needs and preferences.

2.4 User Experience and Interface

2.4.1 Website Design and Navigation

Explore the user interface of the New Chic website. Discuss design elements, ease of navigation, and overall
aesthetics. Consider factors like mobile responsiveness for a seamless experience.

2.4.2 Customer Journey

Evaluate how the website enhances the customer's online shopping journey. Highlight features like
personalized recommendations, user accounts, and a streamlined checkout process.

2.5 Product Range and Categories

2.5.1 Diverse Product Portfolio

9
Detail the range of products available on New Chic, including clothing, accessories, and other categories.
Discuss how the platform caters to a broad spectrum of consumer needs.

2.5.2 Exclusive Partnerships

Explore any exclusive partnerships or collaborations that contribute to New Chic's product offerings. This
could include collaborations with designers or exclusive lines.

10
 3. SYSTEM REQUIREMENTS

3.1 SOFTWARE REQUIREMENTS

Operating System : Windows, Linux, MacOS

Workspace : Sublime Text Editor, Browser

Server : Bitnami WAMP

Language: HTML, CSS, JavaScript, PHP

3.2 HARDWARE REQUIREMENTS

Processor: x86 compatible processor with 1.7GHz or more

Memory: 2GB or more

Hard Disk Space: 10GB or more

11
 4. SOFTWARE DESIGN

4.1 CLASS DIAGRAM

Fig-4.1 Class diagram of Newchic website

The class diagram of the Newchic website provides a high-level overview of the different classes that make
up the system and how they interact with each other. It can be used to guide the development of the website
and to ensure that it is well-designed and maintainable

4.2 USE CASE DIAGRAM

12
 Fig 4.2 USE Case Diagram

The use case diagram you sent shows the different ways that a user can interact with a Newchic website. It
includes the following actors:

 User: This actor represents a customer of the website.

 Admin: This actor represents an administrator of the website.

4.3 SEQUENCE DIAGRAM

Sequence diagram for ordering a product in newchic website

Fig 4.3 Sequence diagram

The sequence diagram you sent shows how a user orders a product on the Newchic website.The sequence
diagram of the Newchic ordering process provides a high-level overview of the different steps involved in
placing an order. It can be used to guide the development of the website and to ensure that the ordering
process is efficient and user-friendly.

The sequence diagram shows the following steps:

 The user searches for a product on the website.

 The products participant returns the results of the search to the user.
 The user selects a product and adds it to their shopping cart.
 The user proceeds to checkout.
 The payment participant processes the user's payment.
 The book participant confirms the order and sends a confirmation email to the user.

13
4.4 Data Flow Diagram

Fig 4.4 Data Flow Diagram

The data flow diagram (DFD) you sent shows the flow of information between the different components of
the Newchic website. The DFD includes the following processes:

 Process Search: This process takes the search query from the user and returns the results from the
products database.
 Process Add to Cart: This process adds the selected product to the user's shopping cart.
 Process Checkout: This process takes the user's shipping and billing information and processes their
payment.
 Process Order: This process confirms the order and sends a confirmation email to the user.

This process confirms the order and sends a confirmation email to the user. The process first updates the
inventory levels for the ordered products. Then, it creates an order record in the database. Finally, it sends a
confirmation email to the user.

5. IMPLEMENTATION
14
The provided code represents the top section of a webpage with navigation links, a logo, user icons, and a
modal trigger button for additional actions like selecting a country. The modal structure is present but not
fully displayed in the provided snippet.

This modal is designed to allow users to select their country, language, currency preferences. The selected
preferences can then be confirmed with the "OK" button, and the modal can be dismissed. The use of
Bootstrap classes (form-group, input-group, form-control, btn, etc.) indicates that this modal benefits from
Bootstrap's styling and functionality.

15
This navigation bar provides links to different sections of the website, and the search bar allows users to
search for specific items. The design is responsive, adjusting for different screen sizes using Bootstrap's
responsive classes.

16
This form provides a user-friendly interface for signing in, with options for social media sign-ins and links
to reset the password.

This section appears to be a continuation of the registration form, providing options for the user to agree to

terms, select style preferences, and complete the registration process.

17
6. OUTPUT SCREENSHOTS

18
Fig 6.1 Homapage

19
 Fig 6.2 registration

Fig 6.3 successful registration

20
Fig 6.4 All categories

Fig 6.5 product

Description

21
 Fig 6.6 Add to cart

Fig 6.7 place ord

7. CONCLUSION
22
The Newchic website project has been a comprehensive endeavor aimed at enhancing the user experience
and functionality of our e-commerce platform. Throughout the development process, we have successfully
addressed various challenges, incorporated innovative features, and ensured a seamless online shopping
experience for our users. Security measures have been implemented to safeguard user data and ensure a
secure transaction environment. Regular security audits and updates will be an ongoing priority to stay
ahead of emerging threats.

The successful implementation of the Newchic website project not only enhances the online shopping
experience for users but also reflects the meticulous planning, innovative design, and efficient execution
carried out by the project team, resulting in a visually appealing and user-friendly platform that aligns
seamlessly with Newchic's brand identity and business objectives."

References
Udemy, W3 Schools, JavaTpoint
23
24