Online shopping website
Data science projects in pondicherry
Create New

Online shopping website

Project period

07/30/2020 - 08/12/2020

Views

84

1

Project Category

Electronics



Online shopping website
Online shopping website

This project is aimed toward developing an Online Shopping for customers. The system is an online shopping delivery that can be accessed throughout the organization and outside as well with proper login and add to card security provided. This system will also be able to provide online help to any kind of people or users all over the world. This system helps the prospective candidates to upload their order and search for a shopping item that suits them. Such applications help the companies and consultancies to advertise their requirements and enable them to look at a searching list of ordered candidates.

This project is developed keeping in view of the distributed client computing technology in mind.  This shopping provides the constructs of high-level reliability and security. The whole side was constructed using HTML 5, CSS, JAVASCRIPT AND BOOTSTRAP.  This project will deliver all types of products.  Example Fruits, Books and Furnitures.  This technique additionally lets company organization collect the user data concerning searching order list things and cart paid details.  Which is able to be used for decisions about their free delivery method. There are many features like email notifications and reminders in the shopping. This project’s Online shopping is an online website in which job seekers can order themselves and then pay cash. Based on the shopping list items the candidates will pay money. The information collected by Database server using php and date on which delivery is conducted will be notified to them through the website. All users around the world are ordered to search things.

Why: Problem statement

During this COVID pandemic,  it is not safe to purchase directly from stores because of more crowds in the shops.  Stores will not available for 24*7 hours. We have to wait for the time to open the shop. If you go and shop directly, your working schedule may get spoiled. If you work overtime or are very busy, then you probably can't find the time to visit the store. Customers cannot be able to spend time seeing all the products from stores. Offline shoppers want to wait in long lines to check out.

The biggest drawback of offline shopping is the lack of choices because physical shops have some limitations(Limited products). When it comes to a variety of choices of products, offline shopping cannot able to provide. Because the choices for products are almost unlimited. Here are the some issues we see in offline shopping.

  • Find parking during seasonal months
  • Long lines again because it’s just disgusting 
  • Busy shop
  • Only limited stock items / range

How: Solution description

Inorder to create a shopping website in online, I have done this project.

Module in this project:

  1. Home: Home page has the header that redirects you to about page, contact page, review page and searching product page. A user will find it easy to search for  information and understand the content.

  2. About page:  This page explains the e-commerce benefits.

  3. Contact page: This page provides contact information where users can contact us through the information provided.

  4. Review page: This page is used for collecting the user’s feedback or messages they leave.

  5. Searching page: This page displays all the main products. From this page,  users can select any product.  Once the user likes the product, they can add it to the cart items. 

How is it different from competition

E-commerce allows the rising trend of smartphone users, E-commerce can be done from anyplace with simply few clicks. Your customers may search for a specific product online, but they may not know that you have it in your online store. You should make people know about your offerings.  This technique reduces manual work like direct shopping.

Some of the online shopping webiste has only images without description. online is images. Sometimes it would not satisfy the people because people definitely wants to kow about the products. My online shopping website has quality images of all the products with description. This help people to know more about the products.

Who are your customers

The customers of this e-commerce delivery are any kind of people in the world. Online customers must have access to the Internet and a valid method of payment in order to complete a transaction. Generally, higher level of education and personal income correspond to more favorable perceptions of shopping online.

During online shopping, customers can spend more time in viewing their product. So that they can get a clear idea about all the products brand. "Product return" are also possible in online shopping, if the people wants to return their products for some reason, they can return their product and get their money back. Transaction will be easier for the people who have online banking. 

Project Phases and Schedule

1. Study: Study about more online websites.

2. Block diagram: Explain in detail about the website and the flow.

3. Technical Feasibility:  To be aware of technical languages like HTML 5, CSS, JAVASCRIPT AND BOOTSTRAP. 

HTML: Hypertext Markup Language is the standard markup language is used to design a page and displayed in a web browser. It can be used with technologies such as CSS and scripting languages such as JavaScript.

CSS: Cascading style sheet describes how HTML elements are to be displayed with different styles like adding color, font size, etc., It can able to control the layout of multiple web pages all at once. External stylesheets are also stored in CSS files.

Javasciprt: JavaScript is a text-based programming language used both on the client-side and server-side which allows you to make web pages interactive. HTML and CSS are languages give structure and style to web pages, JavaScript gives web pages interactive elements that make a user engaged. For eg: Creating form.

Bootstrap: Bootstrap is used to make responsive web design. Bootstrap can also supports JavaScript extensions.

4. Determine product list items: Collect a set of products that we can supply.

5. Pages: Define the pages we need for this website.

5. Create front-end design: Using HTML 5, CSS, JAVASCRIPT AND BOOTSTRAP.

Resources Required

Hardwares and Softwares:

  • Operating system:  Windows XP/7.

  • Coding Language:  Structure language and Programming language used for creating front end websites. HTML and CSS are the structure language.  JAVASCRIPT AND BOOTSTRAP is an open-source programming language, server-side web application designed for web developers to design and create web pages. Developed by Microsoft to allow programmers to create dynamic and static web sites, applications.

  • Platform: As we know JAVASCRIPT is a platform independent language so this software run any platform i.e. Linux ,windows 9x, browse, Firefox or any operating system.

  • Tools: Sublime Text Build 3211. Link to download sublime text  https://www.sublimetext.com/download

  • Sublime Text is a shareware cross-platform source code editor with programming interface. It also supports many programming languages and markup languages. All the functions can be added by users with more plugins, typically under free-software licenses.

Download:
Project Code Code copy
/* Your file Name : as (1).html */
/* Your coding Language : html */
/* Your code snippet start here */
<!DOCTYPE html>
<html>
<head>
	<title>web design</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.gooogleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"></script>
	<style>
ul li a{
margin-left:150px;
color:green;
}
.img{
background:white;
margin-left:2px;
}
#a{
background:green;
}
.btn{
button-align:center;border-radius:25px;
border-color:black;
}
.cold{
background:black;
width:250px;
height:250px;
}
button::active{
	background-color: green;
}
</style> 
</head>
<body>
  <div style="background-image:url(os.jpg); margin: 0; padding: 0; width:100%; height:800px;">
  <nav class="navbar navbar-inverse" id="demo">
  <div class="container-fluid">
        <ul class="nav navbar-nav">
      <li><a href="#" style="color:white;"><span class="glyphicon glyphicon-home"></span> HOME</a></li>
      <li><a href="#car" style="color:white;"><span class="glyphicon glyphicon-user"></span> ABOUT US</a></li>
      <li><a href="#"><img src="2.jpg" Style="width:30px; height:30px;"></a></li>
      <li><a href="aq1.html" style="color:white;"><span class="glyphicon glyphicon-search"></span> CONTACT</a></li> 
      <li><a href="aq3.html" style="color:white;"><span class="glyphicon glyphicon-pencil"></span> REVIEWS</a></li>
    </ul>
  </div>
</nav>
<br><br><br><br><br><br><br>
<br><center>
      <div style="text-align:center;background-color:black;max-width:300px; max-height:400px">
<h2 style="color:green;">ANTIQUE</h2>
<p style="text-align:justify;">A true antique is an item perceived as value because of its aesthetic or historical value because of its aesthetic or historical value because of its aesthetic or historical</p>
<button class="btn" align="center" style="color:green;"><a href="aq1.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></button>
</center>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-sm-6">
<center><br><br>
<img src="3.jpg" style="float:left;width:80%; height:80%;">
</center>
</div>
<div class="col-sm-6" id="car">
<center>
	<br><br><br><br><br><br>
<h2><p style="color:green;">About Us</h2></b>
<p>Your About Us page should be:
Informative. It doesn't always have 
to tell your whole story, but it should 
at least provide people with an 
idea of . Contain social proof, 
testimonials, and some personal 
information that visitors can relate. Your About Us page should be:
Informative. It doesn't always have 
to tell your whole story, but it should 
atleast provide people with an 
idea of . Contain social proof, 
testimonials, and some personal 
information that visitors can relate.
</p>
</center>
</div>
</div>
</div>
<div class="jumbotron text-center" style="width:100%; min-height:100%;">
	<h2 style="color: green;">Our Business</h2>
	<div class="container">
		<div class="row">
<div class="col-sm-4" class="img">
<center style="background-color:white;">
<img src="4.jpg" style="width:80px; height:80px;">
<h4 align="center" style="color: green;">Vegetable Sale</h4>
<p align="center">apes, Pomegranates, Mangoes ,Bananas, Oranges any text Pomegranates, Mangoes ,Grapes,, Mangoes , any text need
Grapes, Pomegranates, Mangoes ,Grapes, Pomegranates</p>
<button class="btn btn-info" align="center" style="color: green;"><a href="veg.html">view more</a></button>
</center>
</div>
<div class="col-sm-4" class="img">
<center style="background-color:white;">
<img src="5.jpg" style="width:80px; height:80px;">
<h4 align="center" style="color: green;">Import & Export</h4>
<p align="center">apes, Pomegranates, Mangoes , Oranges any text Pomegranates, Mangoes , Grapes,, Mangoes , any text need
Grapes, Pomegranates, Mangoes ,Grapes, Pomegranates.</p><br>
<button class="btn btn-info" align="center" style="color: green;"><a href="import.html">view more</a></button>
</center>
</div>
<div class="col-sm-4" class="img">
<center style="background-color:white;">
<img src="6.jpg" style="width:80px; height:80px;">
<h4 align="center" style="color: green;">Antique</h4>
<p align="center">apes, Pomegranates, Mangoes ,Bananas, Oranges any text Pomegranates, Mangoes ,Grapes,, Mangoes , any text need
Grapes, Pomegranates, Mangoes ,Grapes, Pomegranates</p>
<button class="btn btn-info" align="center"><a href="ant.html">view more</a></button>
</center>
</div>
</div>
</div>
<br>
<div class="container">
		<div class="row">
<div class="col-sm-4" class="img">
<center style="background-color:white;">
<img src="7.jpg" style="width:80px; height:80px;">
<h4 align="center" style="color: green;">Furniture</h4>
<p align="center">apes, Pomegranates, Mangoes ,Bananas, Oranges any text Pomegranates, Mangoes ,Grapes,, Mangoes , any text need
Grapes, Pomegranates, Mangoes ,Grapes, Pomegranates</p>
<button class="btn btn-info" align="center" style="color: green;"><a href="fur.html">view more</a></button>
</center>
</div>
<div class="col-sm-4" class="img">
<center style="background-color:white;">
<img src="8.jpg" style="width:80px; height:80px;">
<h4 align="center" style="color: green;">Web Development</h4>
<p align="center">apes, Pomegranates, Mangoes , Oranges any text Pomegranates, Mangoes , Grapes,, Mangoes , any text need
Grapes, Pomegranates, Mangoes ,Grapes, Pomegranates</p><br>
<button class="btn btn-info" align="center" style="color: green;"><a href="web.html">view more</a></button>
</center>
</div>
<div class="col-sm-4" class="img">
<center style="background-color:white;">
<img src="9.jpg" style="width:80px; height:80px;">
<h4 align="center" style="color: green;">Digital Marketing</h4>
<p align="center">apes, Pomegranates, Mangoes ,Bananas, Oranges any text Pomegranates, Mangoes ,Grapes,, Mangoes , any text need
Grapes, Pomegranates, Mangoes ,Grapes, Pomegranates</p>
<button class="btn btn-info" align="center"><a href="dig.html">view more</a></button>
</center>
</div>
</div>
</div>
</div><br>
<center>
<h2 style="color: green;">Reviews</h2>
<div class="container">
  <h2>Customer Testimonials</h2>  
        <img src="10.jpg" class="img-circle" style="width:10%; height:10%;">
<b><h4>This is an best place to buy an old coins...</h4></b>
<p align="center">-Dhiwahar</p>
<p>Rating:<span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span><span class="glyphicon glyphicon-star-empty"></span></p>
<button class="btn" align="center" style="color:green;"><a href="aq3.html">GET QUOTE </a></button>
<style>
.btn{
button-align:center;border-radius:25px;
border-color:black;
}
</style>
   </div><br>
 <hr>
<div class="container">
<div class="row">
<div class="col-sm-3">
<center>
<b><p>Our Business</p></b>
</center>
<p>Vegetable Sale</p>
<p>Antique</p>
<p>Import & Export</p>
<p>Furniture</p>
<p>Web Development</p>
<p>Digital Marketing</p>
</div>
<div class="col-sm-3">
<center>
<b><p>Company</p></b>
</center>
<p>About Us</p>
<p>Blog</p>
<p>Testimonial</p>
<p>Contact Us</p>
</div>
<div class="col-sm-3">
<b><p>Social Media</p></b>
<p><a href="https://www.facebook.com/business/google-analytics/build-your-url"><img src="11.jpg" style="width:15px; height:15px;"></a>
<a href="https://mobile.twitter.com/session/new
"> <img src="12.jpg" style="width:15px; height:15px;"></a>
<a href="https://www.quikr.com/app"> <img src="13.jpg" style="width:15px; height:15px;"></p></a>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</div>
</body>
</html>
View on Github
Online shopping

Comments

Leave a Comment

Post a Comment

Are you Interested in this project?


Do you need help with a similar project? We can guide you. Please Click the Contact Us button.


Contact Us

Social Sharing