1.

INTRODUCTION

Shopping Cart System : Use of Shopping Cart system

Shopping Cart System is the Simple shopping Solution. It's a full-featured website and
shopping cart system that bends over backwards to give you the flexibility you need to run your
online store. The basic concept of the application is to allow the customer to shop virtually using
the Internet and allow customers to buy the items and articles of their desire from the store. The
information pertaining to the products are stores on an RDBMS at the server side (store). The
Server process the customers and the items are shipped to the address submitted by them. The
details of the items are brought forward from the database for the customer view based on the
selection through the menu and the database of all the products are updated at the end of each
transaction.

What is Shopping Cart system?

Online shopping is a form of electronic shopping store where the buyer is directly online to
the seller's computer usually via the internet. There is no intermediary service. The sale and
purchase transaction is completed electronically and interactively in real-time. The development of
this new system contains the following activities, which try to develop on-line application by
keeping the entire process in the view of database integration approach. User gets its eamil id and
password to acces their account.
Administrator of Shopping Cart System has multiple features such as Add, Delete, Update
shopping Items.

Features of shopping cart system.

1. Secure registration and profile management facilities for Customers.

2. Browsing through the e-Mall to see the items that are there in each category of products like
Apparel, Kitchen accessories, Bath accessories, Food items etc.
3. Creating a Shopping cart so that customer can Shop N number of items and checkout finally
with the entire shopping cart

1
4. Customers should be able to mail the Shop about the items they would like to see in the
Shop
5. Secured mechanism for checking out from the Shop (Credit card verification
mechanism).Updates to customers about the Recent Items in the Shop.
6. Uploading Most Purchased Items in each category of products in the Shop like Apparel,
Kitchen accessories, Bath accessories, Food items etc.

2
 2.EXISTING SYSTEM

The feasibility study investigates the problem and the information needs of the stakeholders. It
seeks to determine the resources required to provide an information systems solution, the cost and
benefits of such a solution, and the feasibility of such a solution. The analyst conducting the study
gathers information using a variety of methods, the most popular of which are:

 Interviewing users, employees, managers, and customers.

 Developing and administering questionnaires to interested stakeholders, such as potential
users of the information system.
 Observing or monitoring users of the current system to determine their needs as well as their
satisfaction and dissatisfaction with the current system.
 Collecting, examining, and analyzing documents, reports, layouts, procedures, manuals, and
any other documentation relating to the operations of the current system.
 Modeling, observing, and simulating the work activities of the current system.

The goal of the feasibility study is to consider alternative information systems solutions,
evaluate their feasibility, and propose the alternative most suitable to the organization. The
feasibility of a proposed solution is evaluated in terms of its components. These components are:

The economic viability of the proposed system. The proposed project's cost and benefits are
evaluated. Tangible costs include fixed and variable costs, while tangible benefits include cost
savings, increased revenue, and increased profit. A project is approved only if it covers its cost in a
given period of time. However, a project may be approved only on its intangible benefits such as
those relating to government regulations, the image of the organization, or similar considerations.

The possibility that the organization has or can procure the necessary resources. This is
demonstrated if the needed hardware and software are available in the marketplace or can be
developed by the time of implementation.

The ability, desire, and willingness of the stakeholders to use, support, and operate the
proposed computer information system. The stakeholders include management, employees,

3
customers, and suppliers. The stakeholders are interested in systems that are easy to operate, make
few, if any, errors, produce the desired information, and fall within the objectives of the
organization.

2.1 Advantages:

System analysis is the process of examining a business situation for the purpose of
developing a system solution to a problem or devising improvements to such a situation. Before the
development of any system can begin, a project proposal is prepared by the users of the potential
system and/or by systems analysts and submitted to an appropriate managerial structure within the
organization.
Assuming that a new system is to be developed, the next phase is a system analysis.
Analysis involved a detailed study of the current system, leading to specifications of a new system.
Analysis is a detailed study of various operations performed by a system and their relationship with
in and outside the system. During analysis, data are collected on the available files, decision points
and transactions handled by the present system. Interviews, on-site observation and questionnaire
are the tools used for system analysis. Using the following step it becomes easy to draw the exact
boundary of the new system under consideration :

2.2 Disadvantages:

Keeping in view the problems and new requirements workout the pros and cons including
new areas of the system.
All procedures, requirement must be analysed and documented in the form of detailed data
flow diagrams, data dictionary, logical data structures and miniature specifications. System analysis
also includes sub-dividing of complex process involving the entire system, identifiers of data stores
and manual processes.
The main points to be discussed in system analysis are :
Specification of what the new system is to accomplish based on the user requirements.

4
 3.SYSTEM SPECIFICATIONS

3.1 Hardware requirement :

Section Requirements and Recommendations

Supported Operating Systems Microsoft Windows 7 32/64 bit

Microsoft Windows 8 32/64 bit

Adobe Acrobat Reader 4.0 or higher

Additional Software Requirements

Minimum resolution 800 x 600 pixel

Display 1024 x 768 pixel recommended

2 GB or more
RAM 4 GB or more recommended especially
for Microsoft Windows Vista, 7 and 8

1.5 GHz processor speed or higher

CPU

3.1 Software requirement :

Section Requirements and Recommendations

Microsoft Windows XP
Supported Operating Systems Microsoft Windows Vista
Microsoft Windows 7 32/64 bit

.NET Framework 1.1 and SP 1 for .Net FrameWork

Additional Software Requirements 1.1

5
 4. PROPOSED SYSTEM
4.1 Introduction

Entity Relationship Diagrams are a major data modeling tool and will help organize the data
in your project into entities and define the relationships between the entities. This process has
proved to enable the analyst to produce a good database structure so that the data can be stored and
retrieved in a most efficient manner.

Entity
A data entity is anything real or abstract about which we want to store data. Entity types fall
into five classes: roles, events, locations, tangible things or concepts. E.g. employee, payment,
campus, book. Specific examples of an entity are called instances. E.g. the employee John Jones,
Mary Smith's payment, etc.

Relationship
A data relationship is a natural association that exists between one or more entities. E.g.
Employees process payments.

Attribute
A data attribute is a characteristic common to all or most instances of a particular entity.
Synonyms include property, data element, field. E.g. Name, address, Employee Number, pay rate
are all attributes of the entity employee. An attribute or combination of attributes that uniquely
identifies one and only one instance of an entity is called aprimary key or identifier. E.g.
Employee Number is a primary key for Employee.

6
4.2 MODULES AND ITS DESCRIPTION

A Data Flow Diagram (DFD) is a graphical representation of the "flow" of data through
an information system. A DFD is often used as a preliminary step to create an overview of the
system. DFDs can also be used for the visualization of data processing (structured design).
A DFD shows what kind of information will be input to and output from the system, where the data
will come from and go to, and where the data will be stored. It does not show information about the
timing of process or information about whether processes will operate in sequence or in parallel.

History
Data flow diagrams were proposed by Larry Constantine. The original developer of
structured design, based on Martin and Estrin's "Data Flow Graph" model of computation. Starting
in the 1970s, data flow diagrams (DFD) became a popular way to visualize the major steps and data
involved in software system processes. DFDs were usually used to show data flows in a computer
system, although they could in theory be applied to business process modeling. DFD were useful to
document the major data flows or to explore a new high-level design in terms of data flow.

4.3 DATA FLOW DIAGRAM

Data flow diagram Symbols:
External entities: rectangular box
Data flow: arrow headed lines
Process/ function: bubble/ circle.
Data store: narrow opened rectangle.

A data flow diagram represents the following:

External devices sending or receiving data.
Processes that change the data.
Data flow themselves.
Data storage locations.

7
Types of data flow diagram :
There are two types of data flow diagrams, namely physical data flow diagrams and logical
data flow diagram and it is important to difference between the two:

Physical data flow diagram:

An implementation dependent view of the current system, showing what tasks are carried
out and how they are performed. Physical characteristic can include:
Names of people.
Form and document name and number.
Name of departments.
Master and transaction files.
Equipment and device used.
Locations.
Names of procedures.

Logical data flow diagram :

An implementation independent view of the system, focusing on the flow of data between
processes without regard for the specific devices, storage location or people in the system. The
physical characterstics listed above for physical data flow diagram will not be specified.

8
 5. IMPLEMENTATION

The implementation phase is less creative than system design. It is primarily concerned
with user training, site preparation and file conversion. During file testing, user acceptance is, tested
followed by user training. Depending on the nature of system, extensive user training may be
required. Conversion usually takes place at about the same time the user is being trained.
Programming is thought to be modified as a result of programming effort. Programming provides a
“realty test” for the assumption made by analyst.

System testing checks the deadlines and accuracy of the system.To access, update and
retrieve data from new files. Once the programs become available, test data are read into the
computer and processed against the file provided. For testing, it successful program is then run
with “live” data. Otherwise, a diagnostic test to locate and correct errors. In most conversion,
parallel run is conducted where the new system simultaneous run both old system. This method,
through costly, provided added assurance against errors in the candidate system. This method
through costly, provided added assurance against errors in the candidate system and also the user
staff an opportunity to gain experience through operation.

9
 ONLINE SHOPPING
5.1 CODING……

/**

* jQuerylightBox plugin

* This jQuery plugin was inspired and based on Lightbox 2 by LokeshDhakar

(http://www.huddletogether.com/projects/lightbox2/)

* and adapted to me for use like a plugin from jQuery.

* @name jquery-lightbox-0.5.css

* @author Leandro Vieira Pinho - http://leandrovieira.com

* @version 0.5

* @date April 11, 2008

* @category jQuery plugin

* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)

* @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-

sa/2.5/br/deed.en_US

* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about

this jQuery plugin

*/

#jquery-overlay {

position: absolute;

top: 0;

left: 0;

z-index: 90;

width: 100%;

height: 500px;
10
}

#jquery-lightbox {

position: absolute;

top: 0;

left: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

#jquery-lightbox a img{ border: none; }

#lightbox-container-image-box {

position: relative;

background-color: #fff;

width: 250px;

height: 250px;

margin: 0 auto;

#lightbox-container-image { padding: 10px; }

#lightbox-loading {

position: absolute;

top: 40%;

left: 0%;

height: 25%;

width: 100%;

11
 text-align: center;

line-height: 0;

#lightbox-nav {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

z-index: 10;

#lightbox-container-image-box > #lightbox-nav{ left: 0; }

#lightbox-nav a { outline: none;}

#lightbox-nav-btnPrev, #lightbox-nav-btnNext {

width: 49%;

height: 100%;

zoom: 1;

display: block;

#lightbox-nav-btnPrev {

left: 0;

float: left;

#lightbox-nav-btnNext {

right: 0;

12
 float: right;

#lightbox-container-image-data-box {

font: 10px Verdana, Helvetica, sans-serif;

background-color: #fff;

margin: 0 auto;

line-height: 1.4em;

overflow: auto;

width: 100%;

padding: 0 10px 0;

#lightbox-container-image-data {

padding: 0 10px;

color: #666;

#lightbox-container-image-data #lightbox-image-details {

width: 70%;

float: left;

text-align: left;

#lightbox-image-details-caption { font-weight: bold; }

#lightbox-image-details-currentNumber {

display: block;

clear: left;

padding-bottom: 1.0em;

13
}

#lightbox-secNav-btnClose {

width: 66px;

float: right;

padding-bottom: 0.7em;

/*

* jQuery 1.2.3 - New Wave Javascript

* Copyright (c) 2008 John Resig (jquery.com)

* Dual licensed under the MIT (MIT-LICENSE.txt)

* and GPL (GPL-LICENSE.txt) licenses.

* $Date: 2008-02-06 00:21:25 -0500 (Wed, 06 Feb 2008) $

* $Rev: 4663 $

*/

(function(){if(window.jQuery)var _jQuery=window.jQuery;var
jQuery=window.jQuery=function(selector,context){return new
jQuery.prototype.init(selector,context);};if(window.$)var
_$=window.$;window.$=jQuery;varquickExpr=/^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/;var
isSimple=/^.[^:#\[\.]*$/;jQuery.fn=jQuery.prototype={init:function(selector,context){selector=selec
tor||document;if(selector.nodeType){this[0]=selector;this.length=1;return this;}else if(typeof
selector=="string"){var
match=quickExpr.exec(selector);if(match&&(match[1]||!context)){if(match[1])selector=jQuery.cle
an([match[1]],context);else{var
elem=document.getElementById(match[3]);if(elem)if(elem.id!=match[3])return
jQuery().find(selector);else{this[0]=elem;this.length=1;return this;}else

selector=[];}}else

14
return new jQuery(context).find(selector);}else if(jQuery.isFunction(selector))return new
jQuery(document)[jQuery.fn.ready?"ready":"load"](selector);return
this.setArray(selector.constructor==Array&&selector||(selector.jquery||selector.length&&selector!=
window&&!selector.nodeType&&selector[0]!=undefined&&selector[0].nodeType)&&jQuery.mak
eArray(selector)||[selector]);},jquery:"1.2.3",size:function(){return
this.length;},length:0,get:function(num){return
num==undefined?jQuery.makeArray(this):this[num];},pushStack:function(elems){var
ret=jQuery(elems);ret.prevObject=this;return
ret;},setArray:function(elems){this.length=0;Array.prototype.push.apply(this,elems);return
this;},each:function(callback,args){return
jQuery.each(this,callback,args);},index:function(elem){var ret=-
1;this.each(function(i){if(this==elem)ret=i;});return ret;},attr:function(name,value,type){var
options=name;if(name.constructor==String)if(value==undefined)return
this.length&&jQuery[type||"attr"](this[0],name)||undefined;else{options={};options[name]=value;}
return this.each(function(i){for(name in
options)jQuery.attr(type?this.style:this,name,jQuery.prop(this,options[name],type,i,name));});},css:
function(key,value){if((key=='width'||key=='height')&&parseFloat(value)<0)value=undefined;retur
n this.attr(key,value,"curCSS");},text:function(text){if(typeof text!="object"&&text!=null)return
this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(text));var
ret="";jQuery.each(text||this,function(){jQuery.each(this.childNodes,function(){if(this.nodeType!=
8)ret+=this.nodeType!=1?this.nodeValue:jQuery.fn.text([this]);});});return
ret;},wrapAll:function(html){if(this[0])jQuery(html,this[0].ownerDocument).clone().insertBefore(t
his[0]).map(function(){var
elem=this;while(elem.firstChild)elem=elem.firstChild;returnelem;}).append(this);return
this;},wrapInner:function(html){return
this.each(function(){jQuery(this).contents().wrapAll(html);});},wrap:function(html){return
this.each(function(){jQuery(this).wrapAll(html);});},append:function(){return
this.domManip(arguments,true,false,function(elem){if(this.nodeType==1)this.appendChild(elem);}
);},prepend:function(){return
this.domManip(arguments,true,true,function(elem){if(this.nodeType==1)this.insertBefore(elem,this
.firstChild);});},before:function(){return
this.domManip(arguments,false,false,function(elem){this.parentNode.insertBefore(elem,this);});},a
fter:function(){return
this.domManip(arguments,false,true,function(elem){this.parentNode.insertBefore(elem,this.nextSib
ling);});},end:function(){return
this.prevObject||jQuery([]);},find:function(selector){varelems=jQuery.map(this,function(elem){retu
rn jQuery.find(selector,elem);});return this.pushStack(/[^+>]
[^+>]/.test(selector)||selector.indexOf("..")>-
1?jQuery.unique(elems):elems);},clone:function(events){var
ret=this.map(function(){if(jQuery.browser.msie&&!jQuery.isXMLDoc(this)){var

15
clone=this.cloneNode(true),container=document.createElement("div");container.appendChild(clone
);return jQuery.clean([container.innerHTML])[0];}else

return this.cloneNode(true);});var
clone=ret.find("*").andSelf().each(function(){if(this[expando]!=undefined)this[expando]=null;});if
(events===true)this.find("*").andSelf().each(function(i){if(this.nodeType==3)return;var
events=jQuery.data(this,"events");for(var type in events)for(var handler in
events[type])jQuery.event.add(clone[i],type,events[type][handler],events[type][handler].data);});ret
urn ret;},filter:function(selector){return
this.pushStack(jQuery.isFunction(selector)&&jQuery.grep(this,function(elem,i){return
selector.call(elem,i);})||jQuery.multiFilter(selector,this));},not:function(selector){if(selector.constru
ctor==String)if(isSimple.test(selector))return
this.pushStack(jQuery.multiFilter(selector,this,true));else

selector=jQuery.multiFilter(selector,this);var
isArrayLike=selector.length&&selector[selector.length-
1]!==undefined&&!selector.nodeType;return this.filter(function(){return
isArrayLike?jQuery.inArray(this,selector)<0:this!=selector;});},add:function(selector){return!selec
tor?this:this.pushStack(jQuery.merge(this.get(),selector.constructor==String?jQuery(selector).get():
selector.length!=undefined&&(!selector.nodeName||jQuery.nodeName(selector,"form"))?selector:[
selector]));},is:function(selector){return
selector?jQuery.multiFilter(selector,this).length>0:false;},hasClass:function(selector){return
this.is("."+selector);},val:function(value){if(value==undefined){if(this.length){var
elem=this[0];if(jQuery.nodeName(elem,"select")){var
index=elem.selectedIndex,values=[],options=elem.options,one=elem.type=="select-
one";if(index<0)return null;for(vari=one?index:0,max=one?index+1:options.length;i<max;i++){var
option=options[i];if(option.selected){value=jQuery.browser.msie&&!option.attributes.value.specifi
ed?option.text:option.value;if(one)return value;values.push(value);}}return values;}else

return(this[0].value||"").replace(/\r/g,"");}return undefined;}return
this.each(function(){if(this.nodeType!=1)return;if(value.constructor==Array&&/radio|checkbox/.te
st(this.type))this.checked=(jQuery.inArray(this.value,value)>=0||jQuery.inArray(this.name,value)>
=0);else if(jQuery.nodeName(this,"select")){var

(i,o){jQuery.fn[o]=function(f){return this.bind(o,f);};});varjsc=(new
Date).getTime();jQuery.extend({get:function(url,data,callback,type){if(jQuery.

keyToPrev: 'p', // (string) (p = previous)

Letter to show the previous image

keyToNext: 'n', // (string) (n = next)

Letter to show the next image.

16
 // Don´t alter these variables in any way

imageArray: [],

activeImage: 0

},settings);

// Caching the jQuery object with all elements matched

varjQueryMatchedObj = this; // This, in this context, refer to jQuery object

/**

* Initializing the plugin calling the start function

* @return boolean false

*/

function _initialize() {

_start(this,jQueryMatchedObj); // This, in this context, refer to object (link)

which the user have clicked

return false; // Avoid the browser following the link

/**

* Start the jQuery lightBox plugin

* @param object objClickedThe object (link) whick the user have clicked

* @param object jQueryMatchedObjThe jQuery object with all elements matched

*/

function _start(objClicked,jQueryMatchedObj) {

// Hime some elements to avoid conflict with overlay in IE. These elements
appear above the overlay.

$('embed, object, select').css({ 'visibility' : 'hidden' });

17
 // Call the function to create the markup structure; style some elements;
assign events in some elements.

_set_interface();

// Unset total images in imageArray

settings.imageArray.length = 0;

// Unset image active information

settings.activeImage = 0;

// We have an image set? Or just an image? Let´s see it.

if ( jQueryMatchedObj.length == 1 ) {

settings.imageArray.push(new
Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));

} else {

// Add an Array (as many as we have), with href and title atributes,
inside the Array that storage the images references

for ( vari = 0; i<jQueryMatchedObj.length; i++ ) {

settings.imageArray.push(new
Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));

while ( settings.imageArray[settings.activeImage][0] !=
objClicked.getAttribute('href') ) {

settings.activeImage++;

// Call the function that prepares image exibition

_set_image_to_view();

/**

18
 * Create the jQuery lightBox plugin interface

* The HTML markup will be like that:

<div id="jquery-overlay"></div>

<div id="jquery-lightbox">

<div id="lightbox-container-image-box">

<div id="lightbox-container-image">

<imgsrc="../fotos/XX.jpg" id="lightbox-image">

<div id="lightbox-nav">

<a href="#" id="lightbox-nav-btnPrev"></a>

<a href="#" id="lightbox-nav-btnNext"></a>

</div>

<div id="lightbox-loading">

<a href="#" id="lightbox-loading-link">

<imgsrc="../images/lightbox-ico-
loading.gif">

</a>

</div>

</div>

</div>

<div id="lightbox-container-image-data-box">

<div id="lightbox-container-image-data">

<div id="lightbox-image-details">

<span id="lightbox-image-details-
caption"></span>

19
 <span id="lightbox-image-details-
currentNumber"></span>

</div>

<div id="lightbox-secNav">

<a href="#" id="lightbox-secNav-btnClose">

<imgsrc="../images/lightbox-btn-
close.gif">

</a>

</div>

</div>

</div>

</div>

*/

function _set_interface() {

// Apply the HTML markup into body tag

$('body').append('<div id="jquery-overlay"></div><div id="jquery-

lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img
id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-
btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a
href="#" id="lightbox-loading-link"><imgsrc="' + settings.imageLoading +
'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-
container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-
caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div
id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><imgsrc="' +
settings.imageBtnClose + '"></a></div></div></div></div>');

// Get page sizes

vararrPageSizes = ___getPageSize();

// Style overlay and show it

20
 $('#jquery-overlay').css({

backgroundColor: settings.overlayBgColor,

opacity: settings.overlayOpacity,

width: arrPageSizes[0],

height: arrPageSizes[1]

}).fadeIn();

// Get page scroll

vararrPageScroll = ___getPageScroll();

// Calculate top and left offset for the jquery-lightbox div object and show it

$('#jquery-lightbox').css({

top: arrPageScroll[1] + (arrPageSizes[3] / 10),

left: arrPageScroll[0]

}).show();

// Assigning click events in elements to close overlay

$('#jquery-overlay,#jquery-lightbox').click(function() {

_finish();

});

// Assign the _finish function to lightbox-loading-link and lightbox-secNav-

btnClose objects

$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {

_finish();

return false;

});

// If window was resized, calculate the new overlay dimensions

$(window).resize(function() {

21
 // Get page sizes

vararrPageSizes = ___getPageSize();

// Style overlay and show it

$('#jquery-overlay').css({

width: arrPageSizes[0],

height: arrPageSizes[1]

});

// Get page scroll

vararrPageScroll = ___getPageScroll();

// Calculate top and left offset for the jquery-lightbox div object and
show it

$('#jquery-lightbox').css({

top: arrPageScroll[1] + (arrPageSizes[3] / 10),

left: arrPageScroll[0]

});

});

/**

* Prepares image exibition; doing a image´s preloader to calculate it´s size

*/

function _set_image_to_view() { // show the loading

// Show the loading

$('#lightbox-loading').show();

if ( settings.fixedNavigation ) {

22
 $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-
image-details-currentNumber').hide();

} else {

// Hide some elements

$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-
nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();

// Image preload process

varobjImagePreloader = new Image();

objImagePreloader.onload = function() {

$('#lightbox-
image').attr('src',settings.imageArray[settings.activeImage][0]);

// Perfomance an effect in the image container resizing it

_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);

// clear onLoad, IE behaves irratically with animated gifs

otherwise

objImagePreloader.onload=function(){};

};

objImagePreloader.src = settings.imageArray[settings.activeImage][0];

};

/**

* Perfomance an effect in the image container resizing it

* @param integer intImageWidthThe image´s width that will be showed

* @param integer intImageHeightThe image´s height that will be showed

*/

23
 function _resize_container_image_box(intImageWidth,intImageHeight) {

// Get current width and height

varintCurrentWidth = $('#lightbox-container-image-box').width();

varintCurrentHeight = $('#lightbox-container-image-box').height();

// Get the width and height of the selected image plus the padding

varintWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus

the image´s width and the left and right padding value

varintHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus

the image´s height and the left and right padding value

// Diferences

varintDiffW = intCurrentWidth - intWidth;

varintDiffH = intCurrentHeight - intHeight;

// Perfomance the effect

$('#lightbox-container-image-box').animate({ width: intWidth, height:

intHeight },settings.containerResizeSpeed,function() { _show_image(); });

if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {

if ( $.browser.msie ) {

___pause(250);

} else {

___pause(100);

$('#lightbox-container-image-data-box').css({ width: intImageWidth });

$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height:
intImageHeight + (settings.containerBorderSize * 2) });

};

/**
24
 * Show the prepared image

*/

function _show_image() {

$('#lightbox-loading').hide();

$('#lightbox-image').fadeIn(function() {

_show_image_data();

_set_navigation();

});

_preload_neighbor_images();

};

/**

* Show the image information

*/

function _show_image_data() {

$('#lightbox-container-image-data-box').slideDown('fast');

$('#lightbox-image-details-caption').hide();

if ( settings.imageArray[settings.activeImage][1] ) {

$('#lightbox-image-details-
caption').html(settings.imageArray[settings.activeImage][1]).show();

// If we have a image set, display 'Image X of X'

if ( settings.imageArray.length> 1 ) {

$('#lightbox-image-details-currentNumber').html(settings.txtImage + '
' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();

25
 }

/**

* Display the button navigations

*/

function _set_navigation() {

$('#lightbox-nav').show();

// Instead to define this configuration in CSS file, we define here. And it´s
need to IE. Just.

$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' :
'transparent url(' + settings.imageBlank + ') no-repeat' });

// Show the prev button, if not the first image in set

if ( settings.activeImage != 0 ) {

if ( settings.fixedNavigation ) {

$('#lightbox-nav-btnPrev').css({ 'background' : 'url(' +

settings.imageBtnPrev + ') left 15% no-repeat' })

.unbind()

.bind('click',function() {

settings.activeImage = settings.activeImage - 1;

_set_image_to_view();

return false;

});

} else {

26
 // Show the images button for Next buttons

$('#lightbox-nav-btnPrev').unbind().hover(function() {

$(this).css({ 'background' : 'url(' +

settings.imageBtnPrev + ') left 15% no-repeat' });

},function() {

$(this).css({ 'background' : 'transparent url(' +

settings.imageBlank + ') no-repeat' });

}).show().bind('click',function() {

settings.activeImage = settings.activeImage - 1;

_set_image_to_view();

return false;

});

// Show the next button, if not the last image in set

if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {

if ( settings.fixedNavigation ) {

$('#lightbox-nav-btnNext').css({ 'background' : 'url(' +

settings.imageBtnNext + ') right 15% no-repeat' })

.unbind()

.bind('click',function() {

settings.activeImage = settings.activeImage +
1;

_set_image_to_view();

return false;

});
27
 } else {

// Show the images button for Next buttons

$('#lightbox-nav-btnNext').unbind().hover(function() {

$(this).css({ 'background' : 'url(' +

settings.imageBtnNext + ') right 15% no-repeat' });

},function() {

$(this).css({ 'background' : 'transparent url(' +

settings.imageBlank + ') no-repeat' });

}).show().bind('click',function() {

settings.activeImage = settings.activeImage + 1;

_set_image_to_view();

return false;

});

// Enable keyboard navigation

_enable_keyboard_navigation();

/**

* Enable a support to keyboard navigation

*/

function _enable_keyboard_navigation() {

$(document).keydown(function(objEvent) {

_keyboard_action(objEvent);

});

28
}

/**

* Disable the support to keyboard navigation

*/

function _disable_keyboard_navigation() {

$(document).unbind();

/**

* Perform the keyboard actions

*/

function _keyboard_action(objEvent) {

// Toie

if ( objEvent == null ) {

keycode = event.keyCode;

escapeKey = 27;

// To Mozilla

} else {

keycode = objEvent.keyCode;

escapeKey = objEvent.DOM_VK_ESCAPE;

// Get the key in lower case form

key = String.fromCharCode(keycode).toLowerCase();

// Verify the keys to close the ligthBox

29
 if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey
)){

_finish();

// Verify the key to show the previous image

if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {

// If we´re not showing the first image, call the previous

if ( settings.activeImage != 0 ) {

settings.activeImage = settings.activeImage - 1;

_set_image_to_view();

_disable_keyboard_navigation();

// Verify the key to show the next image

if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {

// If we´re not showing the last image, call the next

if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) {

settings.activeImage = settings.activeImage + 1;

_set_image_to_view();

_disable_keyboard_navigation();

/**

* Preload prev and next images being showed

30
 *

*/

function _preload_neighbor_images() {

if ( (settings.imageArray.length -1) >settings.activeImage ) {

objNext = new Image();

objNext.src = settings.imageArray[settings.activeImage + 1][0];

if ( settings.activeImage> 0 ) {

objPrev = new Image();

objPrev.src = settings.imageArray[settings.activeImage -1][0];

/**

* Remove jQuery lightBox plugin HTML markup

*/

function _finish() {

$('#jquery-lightbox').remove();

$('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });

// Show some elements to avoid conflict with overlay in IE. These elements
appear above the overlay.

$('embed, object, select').css({ 'visibility' : 'visible' });

/**

/ THIRD FUNCTION

31
 * getPageSize() by quirksmode.com

* @return Array Return an array with page width, height and window width, height

*/

function ___getPageSize() {

varxScroll, yScroll;

if (window.innerHeight&&window.scrollMaxY) {

xScroll = window.innerWidth + window.scrollMaxX;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight>document.body.offsetHeight){ // all

but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and

Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

varwindowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer

if(document.documentElement.clientWidth){

windowWidth = document.documentElement.clientWidth;

} else {

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

32
 } else if
(document.documentElement&&document.documentElement.clientHeight) { // Explorer 6 Strict
Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

// for small pages with total height less then height of the viewport

if(yScroll<windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

// for small pages with total width less then width of the viewport

if(xScroll<windowWidth){

pageWidth = xScroll;

} else {

pageWidth = windowWidth;

arrayPageSize = new
Array(pageWidth,pageHeight,windowWidth,windowHeight);

returnarrayPageSize;

};

/**

33
 / THIRD FUNCTION

* getPageScroll() by quirksmode.com

* @return Array Return an array with x,y page scroll values.

*/

function ___getPageScroll() {

varxScroll, yScroll;

if (self.pageYOffset) {

yScroll = self.pageYOffset;

xScroll = self.pageXOffset;

} else if
(document.documentElement&&document.documentElement.scrollTop) { // Explorer 6 Strict

yScroll = document.documentElement.scrollTop;

xScroll = document.documentElement.scrollLeft;

34
 ADMIN PARTCODING
LOGIN.PHP
<?php

session_start();

$name=$_SESSION['eid'];

include("config.php");

$catg=$_REQUEST['cat'];

$subcatg=$_REQUEST['subcat'];

$img=$_FILES['file']['tmp_name'];

$itemno=$_REQUEST['t1'];

$price=$_REQUEST['t2'];

$desc=$_REQUEST['text'];

$t=date("d-m-y h-i-s");

if($_REQUEST['sub'])

if(mysql_query("insert into items values('$catg','$subcatg','$img','$itemno','$price','$desc','$t') "))

move_uploaded_file($_FILES['file']['tmp_name'],"itempics/$itemno.jpg");

echo "<font size='+2'>item inserted successfully</font>";

else

{
35
 echo "item is not inserted";

?><head>

<script>

functionAjaxFunction(cat_id)

varhttpxml;

try

// Firefox, Opera 8.0+, Safari

httpxml=new XMLHttpRequest();

catch (e)

// Internet Explorer

try

httpxml=new ActiveXObject("Msxml2.XMLHTTP");

catch (e)

try

36
 {

httpxml=new ActiveXObject("Microsoft.XMLHTTP");

catch (e)

alert("Your browser does not support AJAX!");

return false;

functionstateck()

if(httpxml.readyState==4)

varmyarray=eval(httpxml.responseText);

// Before adding new we must remove previously loaded elements

for(j=document.testform.subcat.options.length-1;j>=0;j--)

document.testform.subcat.remove(j);

for (i=0;i<myarray.length;i++)

37
varoptn = document.createElement("OPTION");

optn.text = myarray[i];

optn.value = myarray[i];

document.testform.subcat.options.add(optn);

varurl="dd.php";

url=url+"?cat_id="+cat_id;

url=url+"&sid="+Math.random();

httpxml.onreadystatechange=stateck;

httpxml.open("GET",url,true);

httpxml.send(null);

</script>

</head>

<style type="text/css">

<!--

.style3 {font-size: 18px; font-weight: bold; }

-->

</style>

38
<body>

<br><br><br>

<center><font color="#660066" size="+3">Add Item</font></center>

<br><br>

<center><fieldset style="width:50%">

<form name="testform" method="post" enctype="multipart/form-data" >

<table align="center">

<tr><td width="111"><span class="style3">Category:</span></td>

<td width="264"><select name=cat onChange="AjaxFunction(this.value);">

<option value=''>Select One</option>

<?php

require "config.php";// connection to database

$q=mysql_query("select * from category ");

while($n=mysql_fetch_array($q)){

echo "<option value=".$n['cat_id'].">".$n['category']."</option>";

?>

</select></td>

</tr>

<tr><td><span class="style3"> Sub Category:</span></td>

<td><select name=subcat>

</select></td>

</tr>

<tr>

39
<td><span class="style3">Image:</span></td>

<td><input name="file" type="file"></td></tr>

<tr>

<td><span class="style3">Item No: </span></td>

<td><label>

<input name="t1" type="text" id="t1">

</label></td>

</tr>

<tr>

<td><span class="style3">Price:</span></td>

<td><label>

<input name="t2" type="text" id="t2">

</label></td>

</tr>

<tr>

<td><span class="style3">Description:</span></td>

<td><textarea name="text" cols="35" rows="6"></textarea></td></tr>

<tr><td colspan="2" align="center"><input name="sub" type="submit"

value="Submit"></td></tr>

</table>

</form>

</fieldset></center>

</body>

</html>

40
6. RESULTS

41
 7.Conclusion

 This will allow the customers to place order without even visiting the shop.
 Being able to buy anytime ,anyplace,anywhere.
 Site enables them to browse before they shop,and to research the product so
they have more confidence in what they are buying.
 Online shoping becomes more enjoyable and easier than real world shopping.

42
 7. FUTURE ENHANCAMENT

The future of this project depend on whether the author has enough spare time over the
next 2 month to continue with the developing. The author feels that last few remaining features
would round off the system. If the author was to try to sell this system then more system testing
would have to be done, in a particular a more comprehensive real – world. Testing environment
would have to be adopted along with some real words usage. Multiple concurrent users would be
command in real world usage but have been difficult to test for considering there was only tester
involved in this project. This type of system would benefit for the hardware in case of a system
failure for the software in case of newly found bugs, in return of a subscription free.

8. REFFERENCES
Books
Urls
Journals
Used in your Problem Assisted Learning

43
THANK
YOU

44