You are on page 1of 51

Janjyoti Secondary Affiliated To CTEVT

Lalbandi 9, Sarlahi

School

Web application
[Minor Project]

For
ChyShop(your own store)

Signature
Project Guide:-…………………………………………..
External :- …………………………………………..
Principle :- …………………………………………..

1
Prepared By: Sushant Chaudhary Submitted To: Bharat lal mahato
Table of Contents
S.N Contents
1) Introduction……………………………………………………………….
1. Company Profile…………………………………………………
2. Scope Of Work…………………………………………………..
3. Detail Description of Technology Used………………………..
4. Language Used……………………………………..……………
5. HardwareRequirement…………………………………………
6. Software Requirement………………………………..…………
7. Functional requirements…………………………………………
8. Language used…………………………………………………..
2) Proposed System………………………………………………………..
1. Proposed System………………………………………………
a) Feasibility Study……………………………….
a. Technical Feasibility………………………
b. Economics Feasilbility……………………
c. Operational Feasibility……………………
b) Objectives of System………………………….
c) User Requirments……………………………..
3) Aalysis and Design…………………………………………………….
1. Use Case Diagrams…………………………………………….
2. Sequence Diagram……………………………………………..
3. Activity Diagram…………………………………………………
4. Class Diagram…………………………………………………..
5. Collabration Diagram…………………………………………..
6. Deployment & Component Diagram…………………………
7. File/Database Design…………………………………………
4) User Manual………………………………………………………….
1. User Manual………………………………………………….
2. Forms and Reports………………………………………….
3. Test Procedures and case………………………………..
4. Implementation……………………………………………..
5) Drawbacks and Limitations……………………………………………...
6) Proposed Enhancements…………………………………………………
7) Conclusions………………………………………………………………..

Thank you

2
Introduction
Welcome to ChyShop, a dynamic e-commerce website designed to cater to all
your shopping needs. We are committed to providing an extensive range of
products, spanning numerous categories, from electronics and fashion to
kitchen essentials and beyond.

Extensive Product Categories

At ChyShop, we understand the diverse needs of our customers. That's why we


offer an extensive range of products across various categories:
 Electronics: This can be further divided into subcategories like Mobile Devices,
Computers & Laptops, Television & Audio, Cameras, Gaming, and so on.
 Fashion: This can be divided into Men's Clothing, Women's Clothing, Kids'
Clothing, Shoes, Accessories, etc.
 Health & Beauty: This might include subcategories like Skincare, Makeup,
Health Supplements, Personal Care, Hair Care, and so on.
 Home & Living: This can include Furniture, Home Decor, Kitchen & Dining,
Bedding, Home Improvement, etc.
 Sports & Outdoors: This can be divided into Camping & Hiking, Exercise &
Fitness, Cycling, Water Sports, etc.
 Toys, Kids & Babies: This might have subcategories like Toys & Games, Baby
Essentials, Kids' Clothing, Kids' Furniture, etc.
 Automotive: This can include Car Accessories, Car Electronics, Tires & Wheels,
Car Care, etc.
 Books & Music: This might have subcategories like Fiction Books, Non-fiction
Books, E-books, CDs & Vinyl, Musical Instruments, etc.
 Groceries: This can be divided into Fresh Produce, Bakery, Dairy & Eggs,
Beverages, Snacks, etc.
 Services: Some ecommerce sites also offer services, which could include things
like Home Services, Education & Classes, Event Planning & Services, etc.

3
Company Profile
 Company Name: ChyShop
 About: ChyShop is an online marketplace offering a wide range of products
across multiple categories. We aim to provide quality products at competitive
prices.
 Products/Services: We offer products in categories such as electronics,
fashion, home goods, and more.
 Target Market: Our primary customers are online shoppers across various age
groups looking for a convenient and reliable online shopping experience.
 Future Plans: We aim to expand our product range and reach more customers,
providing an even better online shopping experience.

Scope of Work in Nepshop

Objective:
To design, develop, and launch an e-commerce website named "ChyShop"
that will allow customers to browse products, add them to a shopping cart,
and make purchases online.
Scope:
Website Design and Development:
1. Design and implement a user-friendly interface with branding
elements.
2. Create a responsive design for optimal viewing on various devices.
3. Ensure website security and data protection.
Product Catalog:
1. Implement a product database and categorization system.
2. Enable search and filter functions for easy product discovery.
Shopping Cart and Checkout:
1. Develop a shopping cart system for users to add, view, and manage
selected products.

4
2. Implement a secure and convenient checkout process, including
various payment methods.

User Account Management:


1. Allow users to register, login, and manage their personal profiles.
2. Provide users with the ability to track their orders and view their
purchase history.
SEO and Marketing:
1. Optimize the website for SEO to increase visibility in search engines.
2. Integrate with social media platforms for promotion and user
engagement.
Maintenance and Support:
1. Provide ongoing technical support and website maintenance post-
launch.
2. Implement regular updates for security and functionality
enhancements.

Operating Environment - Hardware and Software

our current setup, focusing on the essential elements that ensure our platform
runs seamlessly, providing an optimal shopping experience for our customers.

Hardware Requirement

To use ChyShop smoothly and effectively, your device will need to meet some
basic software requirements. Here they are in simple words:

 Internet Connection: ChyShop is an online platform, so you'll need a


stable internet connection to access it.

 Web Browser: You'll need a web browser to visit ChyShop. This could be
Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, or any other
5
modern browser. Make sure it's updated to the latest version for the best
experience.
 Operating System: ChyShop can be accessed from any device, whether
it's a computer, tablet, or smartphone. So, your device could be running
Windows, macOS, iOS, Android, or any other modern operating system.
 Screen Resolution: While ChyShop can be viewed on screens of all sizes,
a minimum screen resolution of 1024x768 is recommended for the best
viewing experience.
 Cookies: ChyShop uses cookies to remember your preferences and make
your shopping experience smoother. Make sure cookies are enabled in
your web browser.
 Secure Connection: For safety, especially during payment, ChyShop uses
a secure connection (HTTPS). Ensure your browser supports this.

Software Requirement

To use ChyShop smoothly, here's what your device needs:


 Device: You can use any device—a computer, laptop, tablet, or
smartphone.
 Internet: Your device needs to connect to the internet. This could
be Wi-Fi, wired network, or mobile data.
 Screen: You need a screen to see ChyShop. Any size works, as
long as it’s clear and bright.
 Input: If you're on a computer or laptop, you'll need a keyboard
and mouse. On a tablet or smartphone, you’ll use the touchscreen.

Detail Description of Technology Used

ChyShop, I'm happy to provide a detailed description of the technologies we


use to build and maintain our e-commerce platform. Our stack includes HTML,
CSS, PHP, MySQL, and JavaScript - a common combination for web
development.

Frontend Technologies

6
HTML: HTML (Hyper Text Markup Language) is the backbone of any website.
We use it to structure the content on our site. It's used to create the basic
layout and elements of the website like headers, paragraphs, forms, and more.

CSS: CSS (Cascading Style Sheets) is used for styling the HTML elements. It
allows us to control the layout, look, and feel of the website. We use it to apply
styles globally across the site, ensuring consistency.

JavaScript: JavaScript is used to make our website interactive. It allows us to


manipulate the HTML and CSS based on user interactions, providing a dynamic
and engaging user experience. It's used for things like form validation, user
interaction responses (like clicking a button), and more.

Backend Technologies

PHP: PHP is our server-side scripting language. It performs all the server-side
functions like processing form data, generating dynamic page content, and
managing user sessions. It interacts with our MySQL database to store and
retrieve data as required.

MySQL: MySQL is our Relational Database Management System (RDBMS). We


use it to store all our data, including user information, product details, order
history, etc. MySQL is robust and efficient, capable of handling complex queries
and large amounts of data.

Additional Libraries and Frameworks


We also use various libraries and frameworks to increase our development
speed and make our code more efficient and maintainable.

jQuery: jQuery is a JavaScript library that simplifies HTML document traversal,


event handling, and animation. It makes it easier to use JavaScript on our
website.

Bootstrap: Bootstrap is a popular CSS Framework for developing responsive


and mobile-first websites. We use it to ensure our site looks good on all devices
and screen sizes.

7
Laravel: Laravel is a PHP framework that provides a clean and elegant syntax
while also including powerful tools like an ORM (Object-relational mapping),
routing, authentication, and more.

CHAPTER 2: PROPOSED System


ChyShop - Proposed System

ChyShop aims to be a premier online marketplace providing a platform for


buyers and sellers to engage in safe, reliable, and convenient transactions. The
system will facilitate the sale of various products, spanning multiple categories,
and will include features to enhance user experience and security.

User Accounts

Users will be able to create accounts, manage their profiles, track their orders,
create wish lists, and leave reviews.

Product Listings

Sellers can list their products with information including product images,
descriptions, pricing, and shipping details.

Search and Filter

Users can search for products and filter results based on categories, price
range, location, and seller ratings.

Security Measures

Security measures will include data encryption, secure HTTP (HTTPS), two-
factor authentication, and strict privacy policies.

Future Enhancements

8
Future enhancements may include a mobile application, integration with other
marketplaces, and expanded payment options.

Objective of system
1. Provide a User-Friendly Shopping Experience
One of the main objectives is to provide a seamless, user-friendly online
shopping experience. This includes easy navigation, intuitive product search
and filter options, and a simple checkout process.

2. Facilitate Efficient Transactions


ChyShop should facilitate efficient, secure transactions. From the selection of
products to the final payment, the process should be smooth and reliable, with
a variety of payment options to cater to different user preferences.

3. Connect Buyers and Sellers


The platform should serve as a bridge between buyers and sellers, providing a
marketplace for various products. It should allow sellers to easily list their
products, and buyers to conveniently browse and purchase these products.

4. Enhance Trust and Security


Another objective is to enhance user trust and security. This could be achieved
by implementing secure payment gateways, user authentication, and a review
and rating system for products and sellers.

5. Provide Excellent Customer Service


ChyShop should aim to provide excellent customer service, resolving user
queries and issues promptly and effectively. This includes having a robust
customer service module and a clear, efficient process for handling returns and
refunds.

6. Drive Growth and Profitability


Finally, from a business perspective, ChyShop should aim to drive growth and
profitability. This includes attracting more users (both buyers and sellers),
increasing the volume of transactions, and ultimately generating revenue,
whether through sales commissions, listing fees, or other monetization
strategies.
9
User requirement

Using ChyShop should be easy and fun. Here are simple things
you need to know :-
Sign Up: To start shopping, you need to create an account. Just click on
"Sign up" and fill out your information.
Sign In: Already have an account? Click on "Sign in" and enter your email
and password.
Search: Looking for something specific? Type it into the search box and
hit enter to see all the matching products.
Categories: Browse through our categories if you're not sure what you're
looking for. We have lots of different items organized into groups.
Add to Cart: Found something you like? Click on "Add to cart" to save it
for later.
View Cart: Want to see what's in your cart? Click on the cart icon to view
your selected items.
Checkout: Ready to buy? Click on "Checkout", fill in your delivery and
payment details, and hit "Submit".
Track Order: Want to know where your order is? Check the "Order
Status" in your account to see its progress.
Customer Support: Need help? Click on "Customer Support" for answers
to common questions or to chat with our team.
Feedback: We love hearing from you. If you have suggestions or issues,
let us know through the "Feedback" option.

Chapter -3::Analysis and Design


Our proposed system's design involves several key parts, including:

1. Making a User-Friendly Interface (UI)


The UI is where people interact with our system. We want to make it easy to
use, instinctive, and fun. This includes:

10
a. Homepage: This is the first page users see.
b. Product List: Here, users can see all the products we offer.
c. Product Details: This section gives more information about a
specific product.
d. Shopping Cart:This is where users can keep products they're
interested in buying.

1. Building the System Structure


This part is about creating the system's framework. This includes the
software parts, their visible features, and how they interact with each other.

a) Frontend Design: This part manages how users interact with our system
and how information is shown to them.
b) Backend Design: This part manages the behind-the-scenes services, like
verifying user identities, managing products, handling orders,
processing payments, and more.

1. Creating the Database


The database is like our system's memory—it keeps all the information we
need. This includes:

a) Users Table:This keeps track of everyone using our system.


b) Products Table: This stores information about all the products we're
selling.
c) Orders Table: This keeps a record of all the orders that users place.

DataBase Table

Table Admin:-

S.N Name Type Length/Values Description


1. Username varcha 30 user
r
2. Email varcha 40 Email
11
r
3. Password varcha 20 Password
r

Table Notice:

S.N Name Type Length/Values Description


1. Head varchar 30 head
2. Date Date 40 Date
3. Notice Path varchar 50 Path

Table signup:

S.N Name Type Length/Values Description


1. Username varchar 30 user
2. Password Varchar 40 password
3. Email varchar 50 Email

Table Login:-

S.N Name Type Length/Values Description


2. Email varchar 40 Email
3. Password varchar 20 Password

12
Fig. Use Case diagram

Fig. Sequence Diagram

13
Fig .Logical Class diagram

14
Fig: ER Diagram

Fig. Deployment diagram

CHAPTER-4: User Manual


4.1: user manual
Welcome to ChyShop! This guide will help you learn how to use our online
shopping platform effectively.

1. Creating an Account
Before you start shopping, you need to create an account. Just follow these simple
steps:
Click on 'Sign Up' on the top right corner of the homepage.
Fill in your details like name, email address, and create a password.
Click on 'Submit' to create your account.

2. Navigating the Homepage


The homepage is your starting point. You can find different categories of products,
featured items, and special deals here.

15
3. Exploring Products
You can browse products by category or use the search bar at the top of the page
to find something specific.On the 'Product Listing' page, you can see all the
products in a category.
Click on a product to go to the 'Product Detail' page. Here, you can read more
about the product, see its price, and check out customer reviews.

4. Adding Items to Your Shopping Cart


Found something you like? Great! To add it to your shopping cart:
Click on 'Add to Cart' on the product detail page.
You can access your cart at any time by clicking on the 'Cart' icon on the top right
of the page.

5. Checking Out
Ready to buy? Here's how:
Go to your 'Shopping Cart'.
Review the items and quantities. You can change quantities or remove items if
needed.
Click on 'Checkout' to proceed.
Enter your shipping address and payment details.
Confirm your order. You'll receive a confirmation email shortly.

6. Accessing Your Account


You can access your account details, order history, and saved items by clicking on
'My Account' on the top right of the page.

Remember, if you ever need help, you can contact our customer service team.
Happy shopping at ChyShop

16
2.2: Forms and report
1. Login
2. <?php
3. use Phppot\Member;
4. if (! empty($_POST["login-btn"])) {
5. require_once __DIR__ . '/Model/Member.php';
6. $member = new Member();
7. $loginResult = $member->loginMember();
8. }
9. ?>
10.<HTML>
11.<HEAD>
12.<TITLE>Login</TITLE>
13.<link href="assets/css/phppot-style.css" type="text/css"
14. rel="stylesheet" />
15.<link href="assets/css/user-registration.css" type="text/css"
16. rel="stylesheet" />
17.<script src="vendor/jquery/jquery-3.3.1.js"
type="text/javascript"></script>
18.<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
s" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
19.<style>
20. body{
21. background-image:url("./assets/bg1.jpg");
22. background-position: center; /* Center the image */
23. background-repeat: no-repeat; /* Do not repeat the image */
24. background-size: cover; /* Resize the background image to cover the
entire container */
25. }
26..sign-up-container{
27. background-image: linear-gradient(to right, #00FFFFFF , #790975);
28.}
29..form-label{
30.color:white !important;
31.}
32.#login-btn{
33. color:white;
34. font-weight:bold;
35. background: #343a40;
36.}
37.</style>
38.</HEAD>
17
39.<BODY>
40. <div class="phppot-container">
41. <div class="sign-up-container">
42. <div class="login-signup">
43. <a href="user-registration.php" style="color:white;">Sign up</a>
44. </div>
45. <div class="signup-align">
46. <form name="login" action="" method="post"
47. onsubmit="return loginValidation()">
48. <div class="signup-heading" style="color:white;">Login</div>
49. <?php if(!empty($loginResult)){?>
50. <div class="error-msg"><?php echo $loginResult;?></div>
51. <?php }?>
52. <div class="row">
53. <div class="inline-block">
54. <div class="form-label">
55. Username<span class="required error" id="username-info"></span>
56. </div>
57. <input class="input-box-330" type="text" name="username"
58. id="username">
59. </div>
60. </div>
61. <div class="row">
62. <div class="inline-block">
63. <div class="form-label">
64. Password<span class="required error"
id="login-password-info"></span>
65. </div>
66. <input class="input-box-330" type="password"
67. name="login-password" id="login-password">
68. </div>
69. </div>
70. <div class="row">
71. <input class="btn btn-dark" type="submit" name="login-btn"
72. id="login-btn" value="Login Now">
73. </div>
74. </form>
75. </div>
76. </div>
77. </div>
78.
79. <script>
80.function loginValidation() {
81. var valid = true;
82. $("#username").removeClass("error-field");
83. $("#password").removeClass("error-field");
84.
85. var UserName = $("#username").val();
86. var Password = $('#login-password').val();
18
87.
88. $("#username-info").html("").hide();
89.
90. if (UserName.trim() == "") {
91. $("#username-info").html("required.").css("color",
"#ee0000").show();
92. $("#username").addClass("error-field");
93. valid = false;
94. }
95. if (Password.trim() == "") {
96. $("#login-password-info").html("required.").css("color",
"#ee0000").show();
97. $("#login-password").addClass("error-field");
98. valid = false;
99. }
100. if (valid == false) {
101. $('.error-field').first().focus();
102. valid = false;
103. }
104. return valid;
105. }
106. </script>
107. </BODY>
108. </HTML>
109.

Output

Login Interface
19
2. Signup
3. <?php
4. use Phppot\Member;
5. if (! empty($_POST["signup-btn"])) {
6. require_once './Model/Member.php';
7. $member = new Member();
8. $registrationResponse = $member->registerMember();
9. }
10.?>
11.<HTML>
12.<HEAD>
13.<TITLE>User Registration</TITLE>
14.<link href="assets/css/phppot-style.css" type="text/css"
15. rel="stylesheet" />
16.<link href="assets/css/user-registration.css" type="text/css"
17. rel="stylesheet" />
18.<script src="vendor/jquery/jquery-3.3.1.js"
type="text/javascript"></script>
19.</HEAD>
20.<style>
21. body{
22. background-image:url("./assets/abc.jpg");
23. background-position: center; /* Center the image */
24. background-repeat: no-repeat; /* Do not repeat the image */
25. background-size: cover; /* Resize the background image to cover the
entire container */
26. }
27. .sign-up-container {
28. background-image: linear-gradient(to right, rgba(121, 9, 117, 0.5),
rgba(47, 79, 79, 0.5));
29.}
30.
31..form-label{
32.color:white !important;
33.}
34.#signup-btn{
35. color:white;
36. font-weight:bold;
37. background: #343a40;
38.}
39.</style>
40.<BODY>
41. <div class="phppot-container">
42. <div class="sign-up-container">
43. <div class="login-signup">
44. <a href="index.php" style="color:white">Login</a>
45. </div>
46. <div class="">
20
47. <form name="sign-up" action="" method="post"
48. onsubmit="return signupValidation()">
49. <div class="signup-heading" style="color:white">Registration</div>
50. <?php
51. if (! empty($registrationResponse["status"])) {
52. ?>
53. <?php
54. if ($registrationResponse["status"] == "error") {
55. ?>
56. <div class="server-response error-msg"><?php echo
$registrationResponse["message"]; ?></div>
57. <?php
58. } else if ($registrationResponse["status"] == "success") {
59. ?>
60. <div class="server-response success-msg"><?php echo
$registrationResponse["message"]; ?></div>
61. <?php
62. }
63. ?>
64. <?php
65. }
66. ?> <div class="error-msg" id="error-msg"></div>
67. <div class="row">
68. <div class="inline-block">
69. <div class="form-label">
70. Username<span class="required error" id="username-info"></span>
71. </div>
72. <input class="input-box-330" type="text" name="username"
73. id="username">
74. </div>
75. </div>
76. <div class="row">
77. <div class="inline-block">
78. <div class="form-label">
79. Email<span class="required error" id="email-info"></span>
80. </div>
81. <input class="input-box-330" type="email" name="email" id="email">
82. </div>
83. </div>
84. <div class="row">
85. <div class="inline-block">
86. <div class="form-label">
87. Password<span class="required error"
id="signup-password-info"></span>
88. </div>
89. <input class="input-box-330" type="password"
90. name="signup-password" id="signup-password">
91. </div>
92. </div>
21
93. <div class="row">
94. <div class="inline-block">
95. <div class="form-label">
96. Confirm Password<span class="required error"
97. id="confirm-password-info"></span>
98. </div>
99. <input class="input-box-330" type="password"
100. name="confirm-password" id="confirm-password">
101. </div>
102. </div>
103. <div class="row">
104. <input class="btn" type="submit" name="signup-btn"
105. id="signup-btn" value="Sign up">
106. </div>
107. </form>
108. </div>
109. </div>
110. </div>
111. <script>
112. function signupValidation() {
113. var valid = true;
114. $("#username").removeClass("error-field");
115. $("#email").removeClass("error-field");
116. $("#password").removeClass("error-field");
117. $("#confirm-password").removeClass("error-field");
118. var UserName = $("#username").val();
119. var email = $("#email").val();
120. var Password = $('#signup-password').val();
121. var ConfirmPassword = $('#confirm-password').val();
122. var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9]
(?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-
zA-Z0-9])?)*$/;
123. $("#username-info").html("").hide();
124. $("#email-info").html("").hide();
125. if (UserName.trim() == "") {
126. $("#username-info").html("required.").css("color",
"#ee0000").show();
127. $("#username").addClass("error-field");
128. valid = false;
129. }
130. if (email == "") {
131. $("#email-info").html("required").css("color",
"#ee0000").show();
132. $("#email").addClass("error-field");
133. valid = false;
134. } else if (email.trim() == "") {
135. $("#email-info").html("Invalid email address.").css("color",
"#ee0000").show();
136. $("#email").addClass("error-field");
22
137. valid = false;
138. } else if (!emailRegex.test(email)) {
139. $("#email-info").html("Invalid email address.").css("color",
"#ee0000")
140. .show();
141. $("#email").addClass("error-field");
142. valid = false;
143. }
144. if (Password.trim() == "") {
145. $("#signup-password-info").html("required.").css("color",
"#ee0000").show();
146. $("#signup-password").addClass("error-field");
147. valid = false;
148. } if (ConfirmPassword.trim() == "") {
149. $("#confirm-password-info").html("required.").css("color",
"#ee0000").show();
150. $("#confirm-password").addClass("error-field");
151. valid = false;
152. }
153. if(Password != ConfirmPassword){
154. $("#error-msg").html("Both passwords must be same.").show();
155. valid=false;
156. }
157. if (valid == false) {
158. $('.error-field').first().focus();
159. valid = false;
160. }
161. return valid;
162. }
163. </script>
164. </BODY>
165. </HTML>

output

23
Sign up Interface
3. Home page
110. <!doctype html>
111. <html lang="en">
112. <head>
113. <meta charset="utf-8">
114. <meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
115. <link rel="stylesheet" href="css/style.css">
116. <!-- Bootstrap CSS -->
117. <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min
.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
118. <meta charset="utf-8">
119. <meta name="viewport" content="width=device-width, initial-
scale=1">
120. <title>Nepshop</title>
121. <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.
css" rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
122. </head>
123. <body>
124.
125. <!-- Nav bar code -->
24
126. <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
127. <div class="container-fluid">
128. <a class="navbar-brand" href="index.html" title="Home">
129. <img src="items/logo.png" alt="Nepshop logo"
style="border: none; width: 100px; height: auto; border-radius: 50%;" />
130. </a>
131. <button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
132. <span class="navbar-toggler-icon"></span>
133. </button>
134. <div class="collapse navbar-collapse"
id="navbarSupportedContent">
135. <ul class="navbar-nav me-auto mb-2 mb-lg-0">
136. <li class="nav-item">
137. <a class="nav-link active" aria-current="page"
href="index.html">Home</a>
138. </li>
139. <li class="nav-item dropdown">
140. <a class="nav-link dropdown-toggle" href="#"
role="button" data-bs-toggle="dropdown" aria-
expanded="false">Categories</a>
141. <ul class="dropdown-menu">
142. <li><a class="dropdown-item"
href="rch.php">Recharge & Payment</a></li>
143. <li><a class="dropdown-item"
href="elect.php">Electronic Devices</a></li>
144. <li><a class="dropdown-item"
href="fashion.php">Fashion</a></li>
145. </ul>
146. </li>
147. <li class="nav-item">
148. <a class="nav-link"
href="contact/index.php">Contact Us</a>
149. </li>
150. <li class="nav-item">
151. <a class="nav-link" href="About.php">About Us</a>
152. </li>
153. <li class="nav-item">
154. <a class="nav-link" href="notice.php" >Notice</a>
155. </li>
156. <li class="nav-item">
157. <a class="nav-link"
href="signup/index.php">Login/Signup</a>
158. </li>
159. </ul>
160. <form class="d-flex" role="search">

25
161. <input class="form-control me-2" type="search"
placeholder="Search" aria-label="Search">
162. <button class="btn btn-outline-light"
type="submit">Search</button>
163. </form>
164. </div>
165. </div>
166. </nav>
167.
168. <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-
ride="carousel" >
169. <div class="carousel-inner">
170. <div class="carousel-item active">
171. <img src="products/banner1_2.jpg" class="d-block w-100"
alt="..." height="400">
172. </div>
173. <div class="carousel-item">
174. <img src="products/banner1_1.jpg" class="d-block w-100"
alt="..." height="400">
175. </div>
176. <div class="carousel-item">
177. <img src="products/banner1_3.jpg" class="d-block w-100"
alt="..." height="400">
178. </div>
179. </div>
180. <button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleAutoplaying" data-bs-slide="prev">
181. <span class="carousel-control-prev-icon" aria-
hidden="true"></span>
182. <span class="visually-hidden">Previous</span>
183. </button>
184. <button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleAutoplaying" data-bs-slide="next">
185. <span class="carousel-control-next-icon" aria-
hidden="true"></span>
186. <span class="visually-hidden">Next</span>
187. </button>
188. </div>
189.
190. <!-- product line -->
191. <hr>
192.
193. <!-- product list are here -->
194.
195. <ul class="list-group list-group-horizontal" >
196. <li class="list-group-item" ><div class="card" style="width:
18rem;">
197. <img src="items/smartw.jpg" class="card-img-top" alt="...">
198. <div class="card-body">
26
199. <h5 class="card-title" >Ultima Nova Smartwatch </h5>
200.
201. <b><p class="tAmt" style="color:red;"> Rs 1500 </p></b> <s> RS
2500</s> -25%
202. </div>
203. <div class="card-body">
204. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
205. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
206. </div>
207. </div></li>
208.
209. <li class="list-group-item"><div class="card" style="width:
17rem;">
210. <img src="items/switch.jpg" class="card-img-top" alt="...">
211. <div class="card-body">
212. <h5 class="card-title">Removable Switch Sticker </h5>
213. <b><p class="card-text" style="color:red;"> Rs 30 </p></b> <s>
RS 40</s> -10%
214. </div>
215. <div class="card-body">
216. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
217. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
218.
219.
220. </div>
221. </div></li>
222.
223. <li class="list-group-item"><div class="card" style="width:
17rem;">
224. <img src="items/grip.jpg" class="card-img-top" alt="...">
225. <div class="card-body">
226. <h5 class="card-title"> Hand Grip For Hand</h5>
227. <b><p class="card-text" style="color:red;"> Rs 150 </p></b>
<s> RS 300</s> -50%
228. </div>
229. <div class="card-body">
230. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
231. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
232. </div>
233. </div></li>
234.
235. <li class="list-group-item"><div class="card" style="width:
17rem;">
27
236. <img src="items/fan.jpg" class="card-img-top" alt="...">
237. <div class="card-body">
238. <h5 class="card-title">Usb fan</h5>
239. <b><p class="card-text" style="color:red;"> Rs 90 </p></b> <s>
RS 100</s> -10%
240. <div class="card-body">
241. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
242. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
243. </div>
244. </div></li>
245. </ul>
246.
247. <ul class="list-group list-group-horizontal-sm">
248.
249.
250. <li class="list-group-item"><div class="card" style="width:
17rem;">
251. <img src="items/lager.jpg" class="card-img-top" alt="...">
252. <div class="card-body">
253. <h5 class="card-title">Green Multipurpose Laser</h5>
254. <b><p class="card-text" style="color:red;"> Rs 900 </p></b>
<s> RS 1000</s> -53%
255. <div class="card-body">
256. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
257. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
258. </div>
259. </div></li>
260.
261. <li class="list-group-item"><div class="card" style="width:
17rem;">
262. <img src="items/digitalclock.jpg" class="card-img-top"
alt="...">
263. <div class="card-body">
264. <h5 class="card-title">Digital Table Alarm Clock</h5>
265. <b><p class="card-text" style="color:red;"> Rs 658 </p></b>
<s> RS 750</s> -12%
266. <div class="card-body">
267. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
268. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
269. </div>
270. </div></li>
271.

28
272. <li class="list-group-item"><div class="card" style="width:
17rem;">
273. <img src="items/sprite.jpg" class="card-img-top" alt="...">
274. <div class="card-body">
275. <h5 class="card-title">sprite 2.5L</h5>
276. <b><p class="card-text" style="color:red;"> Rs 250 </p></b>
<s> RS 300</s> -10%
277. <div class="card-body">
278. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
279. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
280. </div>
281. </div></li>
282.
283. <li class="list-group-item"><div class="card" style="width:
17rem;">
284. <img src="items/skete.jpg" class="card-img-top" alt="...">
285. <div class="card-body">
286. <h5 class="card-title">Adjustable Skate Shoes </h5>
287. <b><p class="card-text" style="color:red;"> Rs 3890</p></b>
<s> RS 5500</s> -29%
288. <div class="card-body">
289. <a href="" class="card-link"><button type="button" class="btn
btn-outline-primary">More info</button></a>
290. <a href="#" class="card-link"><button type="button" class="btn
btn-outline-secondary">Buy Now</button></a>
291. </div>
292. </div></li></ul>
293.
294. <!-- for other product
295. <ul class="list-group list-group-horizontal-md">
296. <li class="list-group-item">An item</li>
297. <li class="list-group-item">A second item</li>
298. <li class="list-group-item">A third item</li>
299. <li class="list-group-item">A third item</li>
300. </ul>
301. <ul class="list-group list-group-horizontal-lg">
302. <li class="list-group-item">An item</li>
303. <li class="list-group-item">A second item</li>
304. <li class="list-group-item">A third item</li>
305. <li class="list-group-item">A third item</li>
306. </ul>
307. <ul class="list-group list-group-horizontal-xl">
308. <li class="list-group-item">An item</li>
309. <li class="list-group-item">A second item</li>
310. <li class="list-group-item">A third item</li>
311. <li class="list-group-item">A third item</li>
312. </ul> -->
29
313.
314. <!-- product next page-->
315.
316. <nav aria-label="Page navigation example">
317. <ul class="pagination justify-content-center">
318. <li class="page-item disabled">
319. <a class="page-link">Previous</a>
320. </li>
321. <li class="page-item"><a class="page-link" href="#">1</a></li>
322. <li class="page-item"><a class="page-link" href="#">2</a></li>
323. <li class="page-item"><a class="page-link" href="#">3</a></li>
324. <li class="page-item">
325. <a class="page-link" href="#">Next</a>
326. </li>
327. </ul>
328. </nav>
329.
330. <!-- Footer from here -->
331. <footer id="footer" class="footer-1">
332. <div class="main-footer widgets-dark typo-light">
333. <div class="container">
334. <div class="row">
335.
336. <div class="col-xs-12 col-sm-6 col-md-3">
337. <div class="widget subscribe no-box">
338. <h5 class="widget-title">Nepshop<span></span></h5>
339. <p>About the company,
340. Nepshop is an innovative ecommerce platform designed to connect
buyers and sellers in Nepal. With a user-friendly interface and a wide
range of products, Nepshop aims to provide a seamless shopping experience
to its customers. It offers a diverse selection of products, including
electronics, fashion, home appliances, beauty products, books, and much
more.
341. </p>
342. </div>
343. </div>
344.
345. <div class="col-xs-12 col-sm-6 col-md-3">
346. <div class="widget no-box">
347. <h5 class="widget-title">Quick Links<span></span></h5>
348. <ul class="thumbnail-widget">
349. <li>
350. <div class="thumb-content"><a href="index.html">Get
Started</a></div>
351. </li>
352.
353. <li>
354. <div class="thumb-content"><a href="privacy.php">Privacy &
policy</a></div>
30
355. </li>
356. <li>
357. <div class="thumb-content"><a
href="Notice/notice.php">Notice</a></div>
358. </li>
359. <li>
360. <div class="thumb-content"><a href="About.php">About</a></div>
361. </li>
362. </ul>
363. </div>
364. </div>
365.
366. <div class="col-xs-12 col-sm-6 col-md-3">
367. <div class="widget no-box">
368. <h5 class="widget-title">Get Started<span></span></h5>
369. <p>Nepshop ecommerce website is not just a platform, it's an
opportunity to create memorable shopping experiences.</p>
370. <a class="btn"
href="https://www.youtube.com/channel/UCmqTHXXMc2ZEcsvNjBVEp4g"
target="_blank" style="display: inline-block; font-size: 1rem; background-
color: white; color: black; padding: 8px 16px; border-radius: 5px; text-
decoration: none;">Subscribe Now</a>
371. </div>
372. </div>
373.
374. <div class="col-xs-12 col-sm-6 col-md-3">
375.
376. <div class="widget no-box">
377. <h5 class="widget-title">Contact Us<span></span></h5>
378.
379. <p><a href="http://nirojxtha.com/" title="glorythemes">contact us
</a></p>
380. <ul class="social-footer2">
381. <li class=""><a title="youtube" target="_blank"
href="https://www.youtube.com/channel/UCmqTHXXMc2ZEcsvNjBVEp4g"><img
alt="youtube" width="30" height="30" src="#"></a></li>
382. <li class=""><a href="https://www.facebook.com/nirojshrextha"
target="_blank" title="Facebook"><img alt="Facebook" width="30"
height="30" src="#"></a></li>
383. <li class=""><a href="https://twitter.com" target="_blank"
title="Twitter"><img alt="Twitter" width="30" height="30" src="#a></li>
384. <li class=""><a title="instagram" target="_blank"
href="https://www.instagram.com/"><img alt="instagram" width="30"
height="30" src="#"></a></li>
385. </ul>
386. </div>
387. </div>
388.
389. </div>
31
390. </div>
391. </div>
392.
393. <div class="footer-copyright">
394. <div class="container">
395. <div class="row">
396. <div class="col-md-12 text-center">
397. <p>Copyright Nepshop © 2023. All rights reserved.</p>
398. </div>
399. </div>
400. </div>
401. </div>
402. </footer>
403. <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+O
rCXaRkfj" crossorigin="anonymous"></script>
404. <script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu
735Sk7lN" crossorigin="anonymous"></script>
405. <script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.j
s" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/
KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
406. <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle
.min.js" integrity="sha384-
geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
407. </body>
408. </html>

Output

32
Hoempage

Home page with footer

33
4. About us
5. <!DOCTYPE html>
6. <html lang="en">
7.
8. <head>
9. <title>Nepshop</title>
10. <meta charset="UTF-8">
11. <meta http-equiv="X-UA-Compatible" content="IE=edge">
12. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
13. <title>About Us page</title>
14. <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/
all.min.css" />
15. <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.
css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
16.<meta name="viewport" content="width=device-width, initial-scale=1">
17.<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.c
ss" rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
18.
19. <style>
20. @import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600&display=swap');
21. *{
22. padding: 0;
23. margin: 0;
24. box-sizing: border-box;
25. font-family: poppins;
26. }
27. #about-section {
28. width: 100%;
29. height: auto;
30. display: flex;
31. justify-content: space-between;
32. align-items: center;
33. padding: 80px 12%;
34. }
35. .about-left img{
36. width: 420px;
37. height: auto;
38. transform: translateY(50px);
39. }
34
40. .about-right {
41. width: 54%;
42. }
43.
44. .about-right ul li {
45. display: flex;
46. align-items: center;
47. }
48.
49. .about-right h1 {
50. color: #e74d06;
51. font-size: 37px;
52. margin-bottom: 5px;
53. }
54.
55. .about-right p {
56. color: #444;
57. line-height: 26px;
58. font-size: 15px;
59. }
60.
61. .about-right .address {
62. margin: 25px 0;
63. }
64.
65. .about-right .address ul li {
66. margin-bottom: 5px;
67. }
68.
69. .address .address-logo {
70. margin-right: 15px;
71. color: #e74d06;
72. }
73.
74. .address .saprater {
75. margin: 0 35px;
76. }
77.
78. .about-right .expertise ul {
79. width: 80%;
80. display: flex;
81. align-items: center;
82. justify-content: space-between;
83. }
84.
85. .expertise h3 {
86. margin-bottom: 10px;
87. }
88.
35
89. .expertise .expertise-logo {
90. font-size: 19px;
91. margin-right: 10px;
92. color: #e74d06;
93. }
94. </style>
95. </head>
96.
97. <body>
98.
99. <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
100. <div class="container-fluid">
101. <a class="navbar-brand" href="index.html" title="Home">
102. <img src="items/logo.png" alt="Nepshop logo"
style="border: none; width: 100px; height: auto; border-radius: 50%;" />
103. </a>
104. <button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
105. <span class="navbar-toggler-icon"></span>
106. </button>
107. <div class="collapse navbar-collapse"
id="navbarSupportedContent">
108. <ul class="navbar-nav me-auto mb-2 mb-lg-0">
109. <li class="nav-item">
110. <a class="nav-link active" aria-
current="page" href="index.html">Home</a>
111. </li>
112. <li class="nav-item dropdown">
113. <a class="nav-link dropdown-toggle" href="#"
role="button" data-bs-toggle="dropdown" aria-
expanded="false">Categories</a>
114. <ul class="dropdown-menu">
115. <li><a class="dropdown-item"
href="rch.php">Recharge & Payment</a></li>
116. <li><a class="dropdown-item"
href="elect.php">Electronic Devices</a></li>
117. <li><a class="dropdown-item"
href="fashion.php">Fashion</a></li>
118. </ul>
119. </li>
120. <li class="nav-item">
121. <a class="nav-link"
href="contact/index.php">Contact Us</a>
122. </li>
123. <li class="nav-item">
124. <a class="nav-link" href="About.php">About
Us</a>
36
125. </li>
126. <li class="nav-item">
127. <a class="nav-link" href="notice.php"
>Notice</a>
128. </li>
129. <li class="nav-item">
130. <a class="nav-link"
href="signup/index.php">Login/Signup</a>
131. </li>
132. </ul>
133.
134. </div>
135. </div>
136. </nav>
137.

138.
139. <section id="about-section">
140. <!-- about left -->
141. <div class="about-left">
142. <img src="products/banner1_2.jpg" alt="About Img"/>
143. </div>
144.
145. <!-- about right -->
146. <div class="about-right">
147. <h4>our Vision</h4>
148. <h1>About Me</h1>
149. <p>Nepshop has emerged as a leading ecommerce
website in Nepal, transforming the way people shop and do business in the
country. Its user-friendly interface, extensive product range, secure
payment options, reliable delivery, and excellent customer support have
made it a preferred choice among Nepalese online shoppers. As Nepal
continues to embrace the digital era, platforms like Nepshop are likely to
play an instrumental role in further expanding the ecommerce landscape and
contributing to the growth of the nation's economy.
150. </p>
151. <div class="address">
152. <ul>
153. <li>
154. <span class="address-logo">
155. <i class="fas fa-paper-plane"></i>
156. </span>
157. <p>Address</p>
158. <span class="saprater">:</span>
159. <p>lalbandi 7, sarlahi </p>
160. </li>
161. <li>
162. <span class="address-logo">
163. <i class="fas fa-phone-alt"></i>
37
164. </span>
165. <p>Phone No</p>
166. <span class="saprater">:</span>
167. <p>+977 9769791691</p>
168. </li>
169. <li>
170. <span class="address-logo">
171. <i class="far fa-envelope"></i>
172. </span>
173. <p>Email ID</p>
174. <span class="saprater">:</span>
175. <p>Nirojxtha441@gmail.com</p>
176. </li>
177. </ul>
178. </div>
179. <div class="expertise">
180. <h3>Our Expertise</h3>
181. <ul>
182. <li>
183.
184. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-bicycle" viewBox="0 0 16 16">
185. <path d="M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-
1.158A.5.5 0 0 1 11 4h1a.5.5 0 0 1 0 1h-.64l-.311.935.807 1.29a3 3 0 1
1-.848.53l-.508-.812-2.076 3.322A.5.5 0 0 1 8 10.5H5.959a3 3 0 1 1-1.815-
3.274L5 5.856V5h-.5a.5.5 0 0 1-.5-.5zm1.5 2.443-.508.814c.5.444.85
1.054.967 1.743h1.139L5.5 6.943zM8 9.057 9.598 6.5H6.402L8 9.057zM4.937
9.5a1.997 1.997 0 0 0-.487-.877l-.548.877h1.035zM3.603 8.092A2 2 0 1 0
4.937 10.5H3a.5.5 0 0 1-.424-.765l1.027-1.643zm7.947.53a2 2 0 1
0 .848-.53l1.026 1.643a.5.5 0 1 1-.848.53L11.55 8.623z"/>
186. </svg>
187. <span class="expertise-logo">
188. <i class="bi bi-bicycle"></i>
189. </span>
190. <p>delivary on time </p>
191. </li>
192. <li>
193. <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="currentColor" class="bi bi-cash-stack" viewBox="0 0 16 16">
194. <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2
2 0 0 0 0 4z"/>
195. <path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1
0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0
1-2-2H3z"/>
196. </svg>
197. <span class="expertise-logo">
198.
199. </span>
200. <p>Cash on delivery</p>
38
201.
202.
203. </li>
204. <li>
205.
206. </li>
207. </ul>
208. </div>
209. </div>
210. </section>
211. </body>
212.
213. </html>

Output

About us interface
5 Privacy and policy
6 <!DOCTYPE html>
7 <html>
8 <head>
9 <meta charset="UTF-8">
10 <title>Privacy Policy</title>
11 <style>
12 body {
13 font-family: Arial, sans-serif;
39
14 font-size: 16px;
15 line-height: 1.5;
16 color: #333;
17 padding: 10;
18 }
19
20 h1 {
21 font-size: 32px;
22 margin-top: 0;
23 }
24
25 h2 {
26 font-size: 24px;
27 margin-top: 24px;
28 }
29
30 p {
31 margin: 16px 0;
32 }
33
34 ul {
35 margin: 16px 0;
36 padding: 0 0 0 24px;
37 }
38
39 a {
40 color: #007bff;
41 text-decoration: none;
42 }
43
44 a:hover {
45 text-decoration: underline;
46 }
47
48 </style>
49 </head>
50 <body>
51 <h1>Privacy Policy</h1>
52 <p>This Privacy Policy explains how we collect, use, and protect the
information that we collect from users of our educational app. By using our
app, you agree to the terms of this Privacy Policy.</p>
53
54 <h2>Information we collect</h2>
55 <p>We may collect the following types of information from users of our
app:</p>
56 <ul>
57 <li>Personal information, such as your name and email address, when
you create an account or contact us.</li>

40
58 <li>Device information, such as your device type, operating system,
and IP address, when you use our Nepshop.</li>
59 <li>Usage information, such as the pages you visit, the time and
date of your visits, and the actions you take within our Nepshop.</li>
60 </ul>
61
62 <h2>How we collect information</h2>
63 <p>We may collect information from you in the following ways:</p>
64 <ul>
65 <li>When you create an account or contact us through our
website.</li>
66 <li>When you use our app, such as when you visit pages or interact
with our features.</li>
67 <li>When you provide information to us through surveys or other
forms.</li>
68 </ul>
69
70 <h2>Why we collect information</h2>
71 <p>We collect information from users of our app for the following
purposes:</p>
72 <ul>
73 <li>To provide and improve our Nepshop.</li>
74 <li>To communicate with users about our website and related
services.</li>
75 <li>To personalize user experiences within our Nepshop.</li>
76 <li>To analyze how users interact with our Nepshop.</li>
77 </ul>
78
79 <h2>How we protect user information</h2>
80 <p>We take reasonable measures to protect user information from
unauthorized access, disclosure, or misuse. We use secure servers and
encryption to protect user data. However, no security measure is completely
foolproof, and we cannot guarantee the security of user information.</p>
81
82 <h2>Managing your information</h2>
83 <p>Users can access, modify, or delete their information by contacting
us at <a
href="mailto:Nirojxtha441@gmail.com">Nirojxtha441@gmail.com</a>.</p>
84
85 <h2>Third-party services</h2>
86 <p>We may use third-party services, such as Google Analytics and AdMob,
to collect information about how users interact with our app. These
services may use cookies or other technologies to collect information about
user activity. You can learn more about how these services collect and use
information by visiting their respective websites.</p>
87
88 <h2>Changes to this policy</h2>
89 <p>We may update this Privacy Policy from time to time. We will notify
users of any changes by posting the new Privacy Policy on our website.
41
Users are advised to review this Privacy Policy periodically for any
changes.</p>
90
91 <h2>Contact us</h2>
92 <p>If you have any questions about this Privacy Policy, please contact
us at <a
href="mailto:Nirojxtha441@gmail.com">Nirojxtha441@gmail.com</a>.</p>
93 </body>
94 </html>

Output

Privacy and policy interface


7 Notice
8 <!doctype html>
9 <html lang="en">
10 <head>
11 <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min
.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
12

42
13
14 <meta charset="utf-8">
15 <meta name="viewport" content="width=device-width, initial-scale=1">
16 <title>Nepshop</title>
17 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css">
18 <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.
css" rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
19 <style>
20 table {
21 width: 95%;
22 border-collapse: separate;
23 border-spacing: 0;
24 border: 4px solid #1D1D36;
25 border-radius: 10px;
26 margin: 20px auto;
27 }
28
29 th, td {
30 padding: 10px;
31 text-align: center;
32 }
33
34 th {
35 background-color: #1D1D36;
36 color: white;
37 }
38
39 /* Optional: Add a hover effect to the table rows */
40 tr:hover {
41 background-color: #f5f5f5;
42 }
43 th, td {
44 padding: 10px;
45 text-align: center;
46 }
47
48 .cell-1 {
49 background-color: silver;
50 color: black;
51 font-size: 24px;
52 }
53
54 .cell-2 {
55 background-color: silver;
56 color: blue;
43
57 font-size: 20px;
58 }
59
60 .cell-3 {
61 background-color: silver;
62 color: red;
63 font-size: 20px;
64 }
65
66 .cell-3 a {
67 color: inherit;
68 text-decoration: none;
69 }
70
71 .cell-3 a:hover {
72 color: #FFA500;
73 }
74 .download-button {
75 background-color: red;
76 color: white;
77 border: none;
78 padding: 10px 20px;
79 text-align: center;
80 text-decoration: none;
81 display: inline-block;
82 font-size: 16px;
83 cursor: pointer;
84 border-radius: 4px;
85 }
86
87 .download-button:hover {
88 background-color: #ff4d4d;
89 }
90 </style>
91 </head>
92 <body onLoad="myName()">
93 <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
94 <div class="container-fluid">
95 <a class="navbar-brand" href="index.html" title="Home">
96 <img src="items/logo.png" alt="Nepshop logo"
style="border: none; width: 100px; height: auto; border-radius: 50%;" />
97 </a>
98 <button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
99 <span class="navbar-toggler-icon"></span>
100 </button>

44
101 <div class="collapse navbar-collapse"
id="navbarSupportedContent">
102 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
103 <li class="nav-item">
104 <a class="nav-link active" aria-current="page"
href="index.html">Home</a>
105 </li>
106 <li class="nav-item dropdown">
107 <a class="nav-link dropdown-toggle" href="#"
role="button" data-bs-toggle="dropdown" aria-
expanded="false">Categories</a>
108 <ul class="dropdown-menu">
109 <li><a class="dropdown-item"
href="rch.php">Recharge & Payment</a></li>
110 <li><a class="dropdown-item"
href="elect.php">Electronic Devices</a></li>
111 <li><a class="dropdown-item"
href="fashion.php">Fashion</a></li>
112 </ul>
113 </li>
114 <li class="nav-item">
115 <a class="nav-link"
href="contact/index.php">Contact Us</a>
116 </li>
117 <li class="nav-item">
118 <a class="nav-link" href="About.php">About Us</a>
119 </li>
120 <li class="nav-item">
121 <a class="nav-link" href="notice.php">Notice</a>
122 </li>
123 <li class="nav-item">
124 <a class="nav-link"
href="signup/index.php">Login/Signup</a>
125 </li>
126 </ul>
127
128 </div>
129 </div>
130 </nav>
131<?php
132include "db_connect.php";
133
134 $result=mysqli_query($con,"SELECT * FROM notice ");
135
136 print "<table width='95%' border='1' cellpadding='5'>";
137 print "<tr>
138 <td align='center' style=' background-color:#1D1D36;
color:white;'>HEADING</td>

45
139 <td align='center' style=' background-color:#1D1D36;
color:white;'>DATE</td>
140 <td align='center' style=' background-color:#1D1D36;
color:white;'>View</td>
141 <td align='center' style=' background-color:#1D1D36;
color:white;'>Download</td><br>
142 </tr>";
143
144 while($res = mysqli_fetch_array($result))
145 {
146// this is comment code is for 1 line gap print "<tr ><td
colspan='3'> </td></tr>";
147 // print "<tr >";
148 echo "<td class='cell-1'>$res[1]</td>";
149 echo "<td class='cell-2'>$res[2]</td>";
150 echo "<td class='cell-4' align='center' style='color:red;
background-color:silver;'><font size=5><a href='uploads/notice/$res[4]'
><button class='download-button'><i class='fas fa-eye'></i>
View</button></a> </font></td>\n"; echo "<td class='cell-4'
align='center' style='color:red; background-color:silver;'><font size=5><a
href='uploads/notice/$res[4]' download><button class='download-button'><i
class='fas fa-download'></i> Download</button></a> </font></td>\n";
echo "</tr>";
151 }
152 print "</table><br>";
153 mysqli_close($con);
154 ?>
155<!-- Footer from here -->
156<footer id="footer" class="footer-1">
157 <div class="main-footer widgets-dark typo-light">
158 <div class="container">
159 <div class="row">
160 <div class="col-xs-12 col-sm-6 col-md-3">
161 <div class="widget subscribe no-box">
162 <h5 class="widget-title">Nepshop<span></span></h5>
163 <p>About the company,
164 Nepshop is an innovative ecommerce platform designed to connect buyers
and sellers in Nepal. With a user-friendly interface and a wide range of
products, Nepshop aims to provide a seamless shopping experience to its
customers. It offers a diverse selection of products, including
electronics, fashion, home appliances, beauty products, books, and much
more.
165 </p>
166 </div>
167 </div>
168 <div class="col-xs-12 col-sm-6 col-md-3">
169 <div class="widget no-box">
170 <h5 class="widget-title">Quick Links<span></span></h5>
171 <ul class="thumbnail-widget">
46
172 <li>
173 <div class="thumb-content"><a href="index.html">Get Started</a></div>
174 </li>
175 <li>
176 <div class="thumb-content"><a href="privacy.php">Privacy &
policy</a></div>
177 </li>
178 <li>
179 <div class="thumb-content"><a href="Notice/notice.php">Notice</a></div>
180 </li>
181 <li>
182 <div class="thumb-content"><a href="About.php">About</a></div>
183 </li>
184 </ul>
185 </div>
186 </div>
187 <div class="col-xs-12 col-sm-6 col-md-3">
188 <div class="widget no-box">
189 <h5 class="widget-title">Get Started<span></span></h5>
190 <p>Nepshop ecommerce website is not just a platform, it's an opportunity
to create memorable shopping experiences.</p>
191 <a class="btn"
href="https://www.youtube.com/channel/UCmqTHXXMc2ZEcsvNjBVEp4g"
target="_blank" style="display: inline-block; font-size: 1rem; background-
color: white; color: black; padding: 8px 16px; border-radius: 5px; text-
decoration: none;">Subscribe Now</a>
192 </div>
193 </div>
194 <div class="col-xs-12 col-sm-6 col-md-3">
195 <div class="widget no-box">
196 <h5 class="widget-title">Contact Us<span></span></h5>
197 <p><a href="http://nirojxtha.com/" title="glorythemes">contact us
</a></p>
198 <ul class="social-footer2">
199 <li class=""><a title="youtube" target="_blank"
href="https://www.youtube.com/channel/UCmqTHXXMc2ZEcsvNjBVEp4g"><img
alt="youtube" width="30" height="30" src="# "></a></li>
200 <li class=""><a href="https://www.facebook.com/nirojshrextha"
target="_blank" title="Facebook"><img alt="Facebook" width="30"
height="30" src="#"></a></li>
201 <li class=""><a href="https://twitter.com" target="_blank"
title="Twitter"><img alt="Twitter" width="30" height="30" src="#
"></a></li>
202 <li class=""><a title="instagram" target="_blank"
href="https://www.instagram.com/"><img alt="instagram" width="30"
height="30" src="#"></a></li>
203 </ul>
204 </div>
205 </div>
47
206 </div>
207 </div>
208 </div>
209
210 <div class="footer-copyright">
211 <div class="container">
212 <div class="row">
213 <div class="col-md-12 text-center">
214 <p>Copyright Nepshop © 2023. All rights reserved.</p>
215 </div>
216 </div>
217 </div>
218 </div>
219 </footer>
220</body>
221</html>

output

Notice Interface

48
Chapter 5: Drawbacks and Limitations
While we strive to provide the best online shopping experience at
NepShop, there are certain limitations and challenges that we are
working to overcome. Here are a few:

1. Limited Product Variations: Currently, our product assortment,


while diverse, may not cater to all customer preferences. We're
continuously working to expand our product range and cater to a
wider variety of tastes and needs.

2. Geographical Limitations: At the moment, we are only able to ship


to certain regions. This geographical limitation restricts access to our
platform for potential customers outside these areas. We aim to
expand our shipping options in the future.

3. System Performance: During peak shopping times, high traffic


volume may slow down our website's load times. While we've
optimized our site to handle high traffic, there may be occasional
performance dips.

4. Inventory Management: There can be occasions where a product


may be listed as available but is out of stock when the order is
processed. We're improving our real-time inventory tracking to
minimize this issue.

5. User Interface Design: Although our user interface is designed to be


intuitive and user-friendly, some users may still find it challenging to
navigate. We're continuously learning from user feedback to improve
our website's design and usability.

Our team is actively working on these limitations and is committed to


continually improving your shopping experience at NepShop. We
appreciate your understanding and patience as we grow and evolve.
49
Chapter 6: Proposed Enhancements
We are always ready to improve NepShop and provide the best possible
online shopping experience. Here are some enhancements we're planning
to implement:
1. More Products: We want to offer more types of items in more
categories so there's something for everyone.

2. Shipping Everywhere: We're trying to deliver our products to more


places worldwide. This means more people can shop at NepShop.

3. Faster Website: We're working on making our website quicker and


able to handle more people at busy times. This should make
shopping smoother and quicker for you.

4. Up-to-the-Minute Stock Levels: We're working on a better way to


keep track of our stock. This means you'll be able to see if an item is
available as soon as you look at it.

5. Shopping Just for You: We're planning to use special computer


programs that learn what you like. This means we can suggest
products you might be interested in.

6. Better Mobile Shopping: As more people shop on their phones, we're


improving our mobile website and creating a NepShop app. This
should make shopping on your phone easier and more fun.

7. Easier Website to Use: We're planning to make our website even


easier to use based on what our customers tell us. We're thinking
about things like making it simpler to buy products and making it
easier to find what you're looking for.
We're really excited about these improvements. We believe they will make shopping at
NepShop a better experience. We can't wait to share them with you.
50
Conclusion
NepShop has been designed with the aim of providing a seamless, intuitive, and
enjoyable shopping experience for our users. Through our straightforward
interface, wide variety of products, and easy-to-use features, we strive to meet all
your online shopping needs in one place.

Whether you're browsing our diverse product categories, examining an individual


product in detail, or managing your shopping cart, NepShop's user-friendly design
ensures you can navigate the platform with ease. Our secure checkout process
and commitment to customer service provide peace of mind throughout your
shopping journey.

From creating an account to placing an order, our objective is to make online


shopping simple, efficient, and even fun. As we continue to grow and adapt to our
users' needs, we look forward to enhancing and expanding our services. We're
confident that NepShop will remain a preferred choice for online shoppers.

Thank you for choosing NepShop. Happy shopping!

The End

51

You might also like