S.K.B.P.
POLYTECHNIC, KOPARGAON
DIST. A NAGAR - 423603
(2019 - 2021)
Client side scripting language
“onilne shopping system “
(Project member :- Take Snigdha sandip(114)
Under The Guidance
Mr.S.A.Patil
Sanjivani K. B. P. Polytechnic, Kopargaon. (2020-2021)
S.K.B.P.POLYTECHNIC, KOPARGAON.
CERTIFICATE
THIS IS CERTIFICATE TO PROJECT
Client side scripting language
Submitted By
Take Snigdha sandip (114)
Are bonfire work carried out by above students under the supervision of Mr
mr.S.A.patil and it is submitted towards the partial fulfilment of the
requirement of MSBTE, Mumbai for the award of Diploma in Computer
Technology.
Mr S. A. Patil Prof. G.N. Jorvekar Mr.M.V.Khasne
(Subject teacher) (HOD) (Pcc)
Sanjivani K. B. P. Polytechnic, Kopargaon. (2020-2021)
Index
Sr.no Content Page no
1 Introduction 4
Rationale
2 5
Aim /Benefits
3 5
Course Outcomes
4 Achieved
6
Literature Review
5 7
Actual. Methodology
6 follow( 8
8 Program 9-14
9 Output
15
Skills
10 devolvement/learning
outcome of this Micro 16
project
Application of this micro
11 project 17
Conclusion
12 18
Reference 18
13
.
Introduction
Nowadays most of the purchasing of the items that are
needed for the daily basis, can be got through the online
mode. There are many shopping websites like Amazon,
Flipkart, snap deal, Jabong, Shop Clues and many more.
People without wasting much energy in going to the shops
to buy the shopping items that are required can purchase
it through the shopping websites. The Online Shopping
System is the application that allows the users to shop
online without going to the shops to buy them. This will
help in saving the energy, fuel, time needed to do the
shopping by going to the shops. Customer database
management system: The information of the customers
doing the online shopping must be maintained in a well
organized wa
Any shopping website that is concerned will be able to
attract more customers only if the items purchased will be
delivered on time. The user interface should be simple and
easy to understand even by the common people. The
backend should have a strong database. This will be one of
the interesting projects that the final year students can
work on.
Rationale
Online Shopping management system is
beneficial for the management of Users and as a
software it will help in developing professionalism
Users to interact with system.
Aim /Benefits
To develop Online Shopping Management
website and perform validation of forms.
Course Outcomes Achieved
a) Design interactive web page using program flow control
structure.
b) Develop event based forms and handling cookies using
JavaScript.
c) Design Interactive web page using regular expressions
for validations.
d) Design Menus and Navigation in web pages.
Literature Review
JavaScript is mainly used for validations. Having
excellent RegEx and robustness JavaScript is
widely used for pattern matching and validations
of forms on client side. Validating forms on client
side greatly reduces server load and helps in
boosting website experience.
JavaScript is also widely used for enhancement
of user experience on side by making them
dynamic.
The main advantage of Online Shopping
Management System is dynamic Management
software. This software is ideal for Online
Shopping Management. This software Manage
Database, admin login and register the new
employee. It will displays the all information
about users.
Actual Methodology Followed
Online Shopping management system is developed with functionalities such as admin login, New
Registration, view the details of users. This software also provide an Build Database.
Admin Login:
In this section admin can login. This is main page providing personalized access and services to
admin. If admin haven’t remind password he/she can forget the password using the forget password
link provided at bottom of the login page. Admin login is also the first form to be displayed. Admin
credentials will be verified with database table user.
Username should be in pattern of alphabets only and password should be alphanumeric as well as
symbols.
Registration:
In this section admin can register the User. User registered by accepting the information such as
their first name, last name, qualification, field of study, university, date of join, etc. All the
information entered by admin of the user will be inserted into the database table user for further
verification.
Email should be in pattern of abc@xyz.com and password should be alphanumeric.
Admin Options:
This section provides the three option to admin.
• First option is Logout which can exit the admin login.
• Add new User which displays the application form to register the user.
• View Details of employee which displays the all information filled by employee when he/she
register.
Program
<!doctype html>
<html lang="en-US">
<head>
<title>HTML5 Local Storage Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="rating" content="General">
<meta name="expires" content="never">
<meta name="language" content="English, EN">
<meta name="description" content="Shopping cart project with HTML5 and JavaScript">
<meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage">
<meta name="author" content="dcwebmakers.com">
<script src="Storage.js"></script>
<link rel="stylesheet" href="StorageStyle.css">
</head>
<form name="ShoppingList">
<fieldset>
<legend>Shopping cart</legend>
<label>Item: <input type="text" name="name"></label>
<label>Quantity: <input type="text" name="data"></label>
<input type="button" value="Save" onclick="SaveItem()">
<input type="button" value="Update" onclick="ModifyItem()">
<input type="button" value="Delete" onclick="RemoveItem()">
</fieldset>
<div id="items_table">
<h2>Shopping List</h2>
<table id="list"></table>
<label><input type="button" value="Clear" onclick="ClearAll()">
* Delete all items</label>
</div>
</form>
/*
=====> Checking browser support.
//This step might not be required because most modern browsers do support HTML5.
*/
//Function below might be redundant.
function CheckBrowser() {
if ('localStorage' in window && window['localStorage'] !== null) {
// We can use localStorage object to store data.
return true;
} else {
return false;
// Dynamically populate the table with shopping list items.
//Step below can be done via PHP and AJAX, too.
function doShowAll() {
if (CheckBrowser()) {
var key = "";
var list = "<tr><th>Item</th><th>Value</th></tr>\n";
var i = 0;
//For a more advanced feature, you can set a cap on max items in the cart.
for (i = 0; i <= localStorage.length-1; i++) {
key = localStorage.key(i);
list += "<tr><td>" + key + "</td>\n<td>"
+ localStorage.getItem(key) + "</td></tr>\n";
//If no item exists in the cart.
if (list == "<tr><th>Item</th><th>Value</th></tr>\n") {
list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
//Bind the data to HTML table.
//You can use jQuery, too.
document.getElementById('list').innerHTML = list;
} else {
alert('Cannot save shopping list as your browser does not support HTML 5');
}<input type="button" value="Save" onclick="SaveItem()">
<input type="button" value="Update" onclick="ModifyItem()">
<input type="button" value="Delete" onclick="RemoveItem()
localStorage.myProperty="myValue";
localStorage.setItem('propertyName','value');
localStorage.getItem('propertyName');
localStorage.removeItem('propertyName');
localStorage.setItem('propertyName','value');
localStorage.getItem('propertyName');
localStorage.removeItem('propertyName');
function SaveItem() {
var name = document.forms.ShoppingList.name.value;
var data = document.forms.ShoppingList.data.value;
localStorage.setItem(name, data);
doShowAll();
}
<label>Item: <input type="text" name="name" id="name"></label>
<label>Quantity: <input type="text" name="data" id="data"></label>
function SaveItem() {
var name = $("#name").val();
var data = $("#data").val();
localStorage.setItem(name, data);
doShowAll();
//Change an existing key-value in HTML5 storage.
function ModifyItem() {
var name1 = document.forms.ShoppingList.name.value;
var data1 = document.forms.ShoppingList.data.value;
//check if name1 is already exists
//Check if key exists.
if (localStorage.getItem(name1) !=null)
//update
localStorage.setItem(name1,data1);
document.forms.ShoppingList.data.value = localStorage.getItem(name1);
doShowAll();
function ModifyItem() {
var name1 = $("#name").val();
var data1 = $("#data").val();
//Check if name already exists.
//Check if key exists.
if (localStorage.getItem(name1) !=null)
//update
localStorage.setItem(name1,data1);
var new_info=localStorage.getItem(name1);
$("#data").val(new_info);
doShowAll();
function RemoveItem()
var name=document.forms.ShoppingList.name.value;
document.forms.ShoppingList.data.value=localStorage.removeItem(name);
doShowAll();
<input type="button" value="Clear" onclick="ClearAll()">
function ClearAll() {
localStorage.clear();
doShowAll();
//Customer info
//You can use array in addition to object.
var obj1 = { firstname: "John", lastname: "thomson" };
var cust = JSON.stringify(obj1);
//Mailing info
var obj2 = { state: "VA", city: "Arlington" };
var mail = JSON.stringify(obj2);
//Item info
var obj3 = { item: "milk", quantity: 2 };
var basket = JSON.stringify(obj3);
//Next, push three strings into key-value of HTML5 storage.
//Use JSON parse function below to convert string back into object or array.
var New_cust=JSON.parse(cust);
Output
Skill Developed/Learning Outcome of this Micro-
Project:-
• Able to develop JavaScript to implement functions.
• Able to develop JavaScript to implemen Form events.
• Compose Relevent RegEx for given pattern search.
• protect webpage using JS.
Applications of this Micro-Project:-
1) For industries, schools, real estates to collect and maintain their users database
2) To reduce server load by validating data on client machines.
3) To produce dynamic and responsive websites.
Conclusion
Technology has made significant progress over the years to
provide consumers a better online shopping experience and will
continue to do so for years to come. With the rapid growth of
products and brands, people have speculated that online
shopping will overtake in-store shopping. While this has been
the case in some areas, there is still demand for brick and
mortar stores in market areas where the consumer feels more
comfortable seeing and touching the product being bought.
However, the availability of online shopping has produced a
more educated consumer that can shop around with relative
ease without having to spend a large amount of time. In
exchange, online shopping has opened up doors to many small
retailers that would never be in business if they had to incur the
high cost of owning a brick and mortar store. At the end, it has
been a win-win situation for both consumer and sellers.
Reference
Www.project worldsin.com
Www.upgrad.com
Www.code-project.com
