Overview

G&A Online Shopping

G&A Online Shopping is a multilayered architecture project consisting of a data access layer,
connection layer and presentation layer. The shopping cart system was patterned after myayala.com
which was what we exactly want to achieve as a project.

Figure 1.0 G&A Online Shopping Interface

FiguresProgrammer’s
2.0 Sign UpManual
Module

Submitted by:
Magno, Gerald A. 2007140617 IT192P-BT1
Tolentino, Allan Jay B.
 “G&A Online Shopping”

Features

1.1 Register User

This allows registering and creating multiple user accounts for the Website.
1.2 Search Product
Look for products by specifying the category.
1.3 Add to Cart
Add to cart enables you to add items even you have not signed in or provided your login details.
Until the checkout button is clicked the user can add/edit/delete items in cart without providing
login details
1.4 Update/Edit Quantity
Edit quantity for cart items

Design and UI Manual

Use of CSS for themes
<style type="text/css">
body {
margin: 0;
padding: 0;
color: #4E3D4E;
font: normal 0.6em sans-serif, Arial;
background-color: #EDEDED;
width: 100%;
float: left;
}
h1 {
padding-left: 55px;
font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
text-transform:uppercase;
letter-spacing:0.05em;
}
a {

outline: none;
}
</style>

<style type="text/css">
/* rotator in-page placement */
div#rotator {
position:relative;
height:67px;
margin-left: 15px; Submitted by:
top: 0px;
Magno, Gerald A. 2007140617 IT192P-BT1
left: -15px;
Tolentino, Allan Jay B.
width: 524px;
}
Use of Jquery for WebBanner or Image Rotator

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr
ipt>
<script type="text/javascript">
function theRotator() {

$('div#rotator ul li').css({opacity: 0.0});

$('div#rotator ul li:first').css({opacity: 1.0});

//rotate every after 3 seconds

setInterval('rotate()',3000);

function rotate() {

var current = ($('div#rotator ul li.show')? $('div#rotator ul

li.show') : $('div#rotator ul li:first'));
var next = ((current.next().length) ?
((current.next().hasClass('show')) ? $('div#rotator ul li:first')
:current.next()) : $('div#rotator ul li:first'));

next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

current.animate({opacity: 0.0}, 1000)

.removeClass('show');

Submitted by:
Magno, Gerald A. 2007140617 IT192P-BT1
Tolentino, Allan Jay B.
Programmers Manual

Sign Up Module
For our Sign Up module we used the Create User Wizard Control
(see figure 2.0)

Drag CreateUserWizard Control into your Web Form and name it Register.aspx
Go to your Web.Config file and from there you could edit the connection
string of your database which you would store the User Registration
information. Look for Membership tag inside the web.config file and edit
connection string.

<!-- The <authentication> section enables configuration

of the security authentication mode used by
ASP.NET to identify an incoming user. -->
<authentication mode="Forms">
<forms name=".ASPXFORMSAUTH" loginUrl="LogIn.aspx" />
</authentication>
<membership defaultProvider="SqlProvider" userIsOnlineTimeWindow="15">
<providers>
<clear />
<add
name="SqlProvider"
type="System.Web.Security.SqlMembershipProvider"
connectionStringName="GAOLSConnectionString3"
applicationName="MyApplication"
enablePasswordRetrieval="false"
enablePasswordReset="true"
requiresQuestionAndAnswer="true"
requiresUniqueEmail="true"
passwordFormat="Hashed"/>
</providers>
</membership>

<!--

Submitted by:
Magno, Gerald A. 2007140617 IT192P-BT1
Tolentino, Allan Jay B.
 CartControl.ascx.cs
This module will display your cart items and will allow editing the quanitty and
computing the total price.

Here are some of the methods inside the cart control:

protected void DataList1_EditCommand(object source,

DataListCommandEventArgs e)
{
if (CartView.Table.Rows.Count > e.Item.ItemIndex)
DataList1.EditItemIndex = e.Item.ItemIndex;
BindList();
}

protected void DataList1_CancelCommand(object source,

DataListCommandEventArgs e)
{
DataList1.EditItemIndex = -1;
BindList();
}

protected void DataList1_UpdateCommand(object source,

DataListCommandEventArgs e)
{
TextBox qtyText = e.Item.FindControl("txtQuantity") as
System.Web.UI.WebControls.TextBox;
Label priceText = e.Item.FindControl("lblPrice") as
System.Web.UI.WebControls.Label;

string qty = qtyText.Text;

string price = priceText.Text;

ManagerDS.ShoppingCartRow dr =
CartView.Table.Rows[e.Item.ItemIndex] as ManagerDS.ShoppingCartRow;
dr.Quantity = decimal.Parse(qty);
dr.Price = decimal.Parse(price);
dr.SubTotal = dr.Price * dr.Quantity;

DataList1.EditItemIndex = -1;
BindList();
}
protected void DataList1_DeleteCommand(object source,
DataListCommandEventArgs e)
{
if (CartView.Table.Rows.Count > e.Item.ItemIndex)
CartView.Table.Rows.RemoveAt(e.Item.ItemIndex);

BindList();
}

Submitted by:
Magno, Gerald A. 2007140617 IT192P-BT1
Tolentino, Allan Jay B.