Home Page: Search, Navigation links and layout

URL: TOYSTORE: TOYS FOR UNDER 5yrs: http://www.toys4under5.com
URL on London Met webserver: http://cctmdev.londonmet.ac.uk/phr004/coursework1/default.asp

Key words: toys, baby, kids, games, play, quality & safe toys, toystore, bathtoys, imaginative toys, animal & wildlife toys etc etc.....

Description: Toystore, quality and safe toys for kids and baby, affordable price..

Validation code: storefuncs.asp page

Form Validation:

Storefuncs.asp page as mentioned earlier contains all the important functions and routines which do the validation of forms, customer login and new user registration to the database.

For new user registration, storefuncs.asp calls on the addUser subroutine which retrieves all the registration form fields, validates the field data, add the new user information to the user table on the database and adds cookies to the user’s browser.

As a mean to test all the form validations, I conducted series of tests and the result was in the following table:

3: Checkout and form validation:

Checking out proceeds from clicking the Checkout Button in the shopping cart. As the customer checks out, two things must happen. Firstly all the items in the shopping cart must be transferred to the Order table and secondly, the items must be deleted from the Shopping cart. While completing the checkout phase, the customer must follow all the required steps, otherwise transaction will not be completed.

In a ASP page, there are three different methods of using transactions, i.e. creating transactional Active Server Pages, creating ADO transactions or using database transactions.
Using transactional ASP page, if one step fails in transaction, all the earlier steps are rolled back, avoiding loss of money.

I created transactional ASP page by including the @TRANSACTION directive at the top of the page in the first line.

Completing the Checkout or Order:

Once the customer finishes shopping and clicks on the Checkout button on the Shopping cart page, the customer is presented with – firstly a page (doCheckout.asp) with a form, which enables the customer to check his/her personal details such as name, address and credit card details and confirm the order. After that, a new page (dpCheckout2.asp) will be displayed thanking the customer for putting the order, whereby the items in the shopping cart are transferred to the Orders table. With this a customer completes putting an order!

Since I have changed the Customer registration information to my own choosing as in the UK, we don not have state, or city or zip in the address, I changed City to County, deleted the State section and changed Zip to Post Code. While doing these changes and tested the page, I did come across few problems of which I intend to discuss below.

In register.asp page, I also had to change as same as the above which I did by changing the code as follows:
<.%
newusername = TRIM( Request( "newusername" ) )
newpassword = TRIM( Request( "newpassword" ) )
email = TRIM( Request( "email" ) )
street = TRIM( Request( "street" ) )
county = TRIM( Request( "county" ) )
postcode = TRIM( Request( "postcode" ) )
cctype = Request( "cctype" )
ccnumber = TRIM( Request( "ccnumber" ) )
ccexpires = TRIM( Request( "ccexpires" ) )
ccname = TRIM( Request( "ccname" ) )

s.ubmitpage = Request.ServerVariables( "SCRIPT_NAME" )
%>



County :
<.input name="county" id="county"
value="<.%=Server.HTMLEncode( county )%>" size=20 maxlength=50>


Post Code:
<.input name="postcode" id="postcode"
value="<%=Server.HTMLEncode( postcode )%>" size=20 maxlength=20>
<./font>

Payment Information:


Similarly I have to change whole lot of codes in the storefunc.asp page as it contains all the routines and functions which manage and take care of all the functionalities in other pages i.e. checking forms, user registrations, check out procedure etc.

Shopping Cart Functionality & errors resolution

For my shopping cart, it is basically simple. The functionality of it is that when a customer clicks on Add to cart button on a product page, log in page or registration page (if a new customer) will be displayed. If the log in is correct or the registration is completed successfully, the selected product information would be added to an array contained a session variable named cart (if shopping cart is created using session variable) or addcart.asp page will be displayed ( if the 'shopping cart is created using database table).

I tried creating shopping cart in both ways- using session variable as well as using database table. However later on, I decided to use the one I created using database table. This is because there are some major drawbacks with the shopping cart created using session variables. Notably session variables depend on cookies which not all browsers reliably support and the other thing is that session variables do time-out after a preset period of time.

Problems: While creating the shopping cart, I did come across numerous errors, especially as I have to change the codes of cart created using session variables to the new one which would use database table to create the cart. I have also problems implementing the delete feature of the shopping card, as well as showing product price on all the pages which I will be discussing in the following error and solution section.

CART.ASP/ PRODUCT.ASP PAGE ERRORS:
HTTP Error 405
405 Method Not Allowed
The method specified in the Request Line is not allowed for the resource identified by the request. Please ensure that you have the proper MIME type set up for the resource you are requesting.
Please contact the server's administrator if this problem persists.

Hint: This error comes up when I click on the Add to cart button. The error message is not clear where the error is located, which it normally comes out with error names and page name with line number.

Since it happened after clicking on the Add To Cart button, I suspect there might be errors in the code with my addCart.asp page or product.asp page.

Solution: I found the mistakes in Product.asp page, which has link to the addCart.asp. The follow code has to be replaced with the code in blue color to fix this problem.


'<.form method="post" action=".sessionCart.asp”>
'<.input name="pid" type="hidden" value="<%=RS (“product_id”) %>">
'<.input name="productName" type="hidden” value="<%=RS( "product_name" )%>">
'<.input name="productPrice" type="hidden” value="<%=RS( "product_price" )%>">
'



'

'

'<.input name="pid" type="hidden" value="<.%=RS( "product_id" )%'>">
'
'

'<%=RS( "product_fullDesc" )%>

'

' <.input name="pid" type="hidden" value="<%=RS( "product_id" )%>">
'
'

Error: At first My shopping cart have no facility for deleting a product from the shopping list which is not quiet as user friendly as it should be as can be seen from this diagram;


The code causing this error was:
<'%
FOR i = 0 TO UBOUND( localCart, 2 )
IF localCart( CARTPID, i ) <> "" THEN
orderTotal = orderTotal + ( localCart( CARTPPRICE, i ) * localCart( CARTPQUANTITY, i ) )
%'>


<.%=Server.HTMLEncode( localCart( CARTPNAME, i ) )%.>


<.%=formatCurrency( localCart( CARTPPRICE, i ) )%>


'<.input name="pq<%=localCart( CARTPID, i )%>" type="text" size=4
value="<%=localCart( CARTPQUANTITY, i )%>">




Solution: To resolve this problem, I added the codes in the blue color in the following codes.
<.%
FOR i = 0 TO UBOUND( localCart, 2 )
IF localCart( CARTPID, i ) <> "" THEN
orderTotal = orderTotal + ( localCart( CARTPPRICE, i ) * localCart( CARTPQUANTITY, i ) )
%.>


'<.%=Server.HTMLEncode( localCart( CARTPNAME, i ) )%>


'<.%=formatCurrency( localCart( CARTPPRICE, i ) )%>


'<.input name="pq<%=localCart( CARTPID, i )%>" type="text" size=4
value="<%=localCart( CARTPQUANTITY, i )%>">
'<.input name="pd<%=localCart( CARTPID, i )%>" type="checkbox" value="1"> Delete



After adding the lines in the code, I get the following desired shopping cart!!


Problems with the shopping card delete section:
ADODB.Recordset error '800a0cc1'
Unknown runtime error
/phr004/coursework1/addCart.asp, line 42
Solution: Resolved by typing in card_id in the line below:
RS.Open sqlString
WHILE NOT RS.EOF
newQ = TRIM( Request( "pq" & RS( "cart_id" ) ) )
deleteProduct = TRIM( Request( "pd" & RS( "cart_id" ) ) )
IF newQ = "" OR newQ = "0" OR deleteProduct <> "" THEN
RS.Delete
ELSE
IF isNumeric( newQ ) THEN
RS( "cart_quantity" ) = newQ
END IF

Shopping Cart

2: The shopping cart:

To process the customer orders, I would require the following tables in the main database so that the while shopping, these tables help keep track of individual customer details, order details, cart details etc. Therefore I have created tables for Users, Carts and Orders as in the diagram below;

When a customer clicks on the Add to Cart button on a product page, cart.asp page is brought up which will then do either of two things, one if a customer has already registered, he or she can log in, thereby displaying addcart.asp page; otherwise, registration page will be displayed.

In the cart.asp page, I have included two files;

“aovbs.inc” contains all the constants for the ActiveX Data Objects and storefuncs.asp page has all the common functions and subroutines used in the shopping experience and evaluating all sorts of forms.

The following codes are used to retrieve productID and username and password.

..<,%,,

' Get Product ID

productID = TRIM( Request( "pid" ) )

' Get Login Information

username = TRIM( Request( "username" ) )

password = TRIM( Request( "password" ) )

register = TRIM( Request( "register" ) )

error = TRIM( Request( "error" ) )

Following codes are used to add new customer registration information to the database as well as to log in registered customers, by checking username and passwords. If the log in is successful, addcart.asp is displayed and otherwise, register.asp page is displayed to register a new customer. The functions which checks username and passwords is included in another page called storefunc.asp.

‘ Check For New Registration

IF register <> “” AND error = “” THEN

addUser

END IF

‘ Get User ID

userID = checkpassword( username, password, Con )

IF userID > 0 THEN

..%>

Feed back error:

Microsoft OLE DB Provider for ODBC Drivers error '80040e0c'

Command text was not set for the command object.

/phr004/coursework1/saveFeedback.asp, line 15

Solution:

sqlString = "INSERT INTO feedback ( feedback_email, feedback_comment ) " &_

"VALUES ('" & fixQuotes ( email ) & "','" & fixQuotes( comment ) & "')"

dsnCon.Execute sqlString

Changing the Submit button with Add to cart gif by editing the tag for the button links. This replaces the ugly default button with a nice looking image. It is done as follows in dreamweaver.

Edit tag: <..input type="submit" value="Add To Cart"> to

Edit tag: <..input type=image src="images/cart.gif">

Featured Page: & Critical Evaluations by two independent referees:

This error was generated when I was trying to show the Product Price on the Featured Page as it only shows Product Name and Brief Description.

Error:

Microsoft VBScript runtime error '800a0009'

Subscript out of range: '[number: 4]'

/phr004/coursework1/Featured.asp, line 52

Resolved the issue by finding the error in the code as shown below:

<%

FOR i = 0 TO topFeatured - 1 STEP skip

offset = RND * ( skip - 1 )

productID = featuredArray( 0, i + offset )

productPicture = featuredArray( 1, i + offset )

productName = featuredArray( 2, i + offset )

productBriefDesc = featuredArray( 3, i + offset )

productPrice = featuredArray( 4, i + offset )

%>

<% IF productPicture <> "?????" THEN %>

"

HSPACE=5 VSPACE=5 BORDER=0 align="center">

<% END IF %>

">

<%=productName%>

<%=productBriefDesc%>

£<%=productPrice%>

Evaluation 1: By Tenzin Choekyi, Toronto, Canada 15/09/2008

Your website is fairly quick to download, I checked in both Internet explorer and firefox. It looks fine in the Mozzilla firefox but in the Internet Explorer, I noticed that one of the lines from the header sections comes out from the rest of the page and that the search and categories section looks out of order.

Browsing through the product looks fine however I find product image bit small and that there is no product price being shown, which I believe is most important from the buyers point of view.

Your layout is plain and simple; I suggest it could be made more stylish with glossy or trendy buttons, having rollover effect etc, which would be more user- friendly.

Fonts are bit small and distinction between the headings and plain text paragraphs are less obvious, which I should suggest you make more contrasting and eye catching.

Keywords with the main page and other pages are fine but may be you could add one or more appropriate keywords i.e. safety, children, happy, play and games etc.

The rest looks fine and I wish you good luck.

Evaluation 2: By Tenzin Rangdol, Tibet Society UK, 28/08/2008

Phurbu la,

As far as i m concerned there are few areas that needs to be changed for your attractive website and they are as follow:

a) Toys need to be eye catching as they are not clear enough. I feel if you can create button to make it enlarge or if u can create a button to have separate window for the object to be seen in enlarged, then its quite better i feel so....

b) I feel your site need to be much animated to attract the visitors. Table borders of the header links are coming out and it doesn’t look good.

c) My account icon on the top need to be activated. It takes time to load the logo picture.

d) As there are few visitors who just want to register rather not have idea buying anything from your store, thus I feel it’s better if u can separately for registering rather than making registration in a check out side.
e) If you have a page or a paragraph introducing your company would be helpful.

f) Links are not user friendly, I didn’t like the red color for the link and underline for all the links. If the under line comes on the rollover and rollover color will be great.

These are areas where i feel of need of modification. But as a whole i should definitely say its really very nice attempt and i truly appreciate ur effort. Good luck and hope to have colorful result.......

Thank you both Tenzin Choekyi and Tenzin Rangdol for their evaluations.

Problems with the shopping card delete section:

ADODB.Recordset error '800a0cc1'

Unknown runtime error

/phr004/coursework1/addCart.asp, line 42

Solution:

Resolved by typing in card_id in the line below:

RS.Open sqlString

WHILE NOT RS.EOF

newQ = TRIM( Request( "pq" & RS( "cart_id" ) ) )

deleteProduct = TRIM( Request( "pd" & RS( "cart_id" ) ) )

IF newQ = "" OR newQ = "0" OR deleteProduct <> "" THEN

RS.Delete

ELSE

IF isNumeric( newQ ) THEN

RS( "cart_quantity" ) = newQ

END IF

Creating glossy/trendy buttons in photoshops:

I used Photoshop to create all my buttons, I thought about using Rollover button but then decided not to as it is bit extra and that I like my current buttons.

Creating the buttons involves using all the tools necessary to get the required button. I have extensively used layers, layer's blending Options as well as Rulers & Grid, Blurr tool etc to get the best button.

From the layer Blending mode, I have specifically used Drop Show for the text, Gradient Overlay for the main button layer and Satin for the base layer. Rectangular Marquee tool is used to cut half a layer which is then filled with White paint. The layer's opacity is then lowered to suit the cutting edge at the half of the button.

Manupulating the Gradient tool with various colour at different length (in %) of the button is useful to get all sorts of trendy button. I managed to play well it and got the button with the desired colour I wanted.

Logo design:

I used the Gradient tool to select the top and base color of the gradient, which is then drag on the screen by holding the shift key. Pencil tool with 1pix is used to draw a border line on a new layer.

Marquee tool is used to select half of the logo screen which is then filled with white color using Paint brush.

I also opened the layer properties and selected various options to make the image look nice. I have chosen properties such as Drop Shadow, Outer Glow and Bevel & Emboss.

Logo Design in Photoshop

I used one picture from the website, from which I used Lasso Tool to cut the image that I wanted for. A new file was opened on which I pasted the cut image. Magic Wand tool is used to further cut the image from its surrounding. Throughout this process, cut and paste as well as eraser tool is used to make the final image as real as possible.

The final image is then shape in to various size until the most appropriate size is drawn out of it. This is done by choosing Edit/Image size from the Photoshop menu.

(Note: however the image size turned out to be bit large when actually put on the website, so I decided to create a new one, besides I don't quiet like this logo.)

Domain name Research & Storyboarding diagrams:

Scanned hand-drawn storyboarding technique applied to design planning for your website:

I did researches on various domain names for my coursework website on the theme of toys for under 5s on www.namecheap.com and www.godaddy.com.

All the interesting names have been already bought but luckily I managed to get one simple and easy for myself. It is www.toys4under5.com.

I tried to keep my domain name as simple and easy as possible to remember, as easy and relevant to the theme and short.

Domain names should be integrally related to the theme of the website and simple/short so that the intended audience easily gets associated to it. For the promotion of the company or a website, domain name plays a pivotal role.

Creating Spacer Gif in Photoshop

Creating Spacer Gif: A spacer.gif is a 1x1 transparent gif image which is used to fill in space, without being visible. A lot of web designer commonly use spacer.gif to fill empty table cells as one can resize it in html coding to any size.

I have created my spacer in Photoshop by: choose new file->1wx1h->background color: transparent.

Working on with Mangage Product Page

To manage products, I have decided to create a manage product page on which there are links to the add product page and update product page.

Mange product page will show the list of product in the database and it has links with each product to the update product page.

Update product page will allow changing any product details or deleting any product details.

Add product page will simply bring a add product form to add a new product. After each addition or update of product, confirmation message will be shown on the manage product page.

Error message 1:

Microsoft OLE DB Provider for ODBC Drivers error '80040e10'

[Microsoft][ODBC Microsoft Access Driver] Too few parameters. Expected 1.

/phr004/coursework1/manageproducts.asp, line 102

Error message 2:

Microsoft OLE DB Provider for ODBC Drivers error '80040e14'

[Microsoft][ODBC Microsoft Access Driver] Syntax error (missing operator) in query expression 'product_id='.

/phr004/coursework1/updateProduct.asp, line 13

Solution:

Above two error messages are from the manageproduct.asp page and updateproduct.asp page. I fixed the problem by creating the correct dsn and pointing it right to the Access Database file on the server.

Open DSN Connection:

Set dsnCon = Server.CreateObject("ADODB.Connection")

dsnCon.Open "dsn=phr004cw1;uid=phr004;pwd=ce95099wi;"