Virtual
Shopping
In today's ever competitive business environment , customer service and customer satisfaction are often considered as critical to an organisation's success as the financial indicators. In the eyes of many companies , " Customer satisfaction and Financial success are the two sides of the same coin ".
The Internet can be used to achieve the twin goals.Using this technology, enables a company to make it's marketing literature ,product announcements and public pricing available to a large audience without the costs associated with printing and distributing written information. Changes to this information can be made immediately , without the costs & delays involved with printed materials.
The benifit to the user is the immediate accessibility of information. There is a vast amount of information on the Internet , and the tools available today make this information very accessible.
1.1 Reasons To Get On The Internet:
One of the emerging uses of the Internet is Electronic Tele-marketing , which provides an alternative to traditional tele-marketing. Tele-marketing is very expensive , especially for a small company - the result is either losing customer calls or employing more staff than needed. Also, traditional tele-marketing uses same skill-level person to answer technical questions as it does to take down a name and send a literature.
As it enters the Electronic age , a company provides all its literature and other pricing-related information on a Web Server, which provides customers with a chance to browse and download the desired information instead of making a telephone call to get answers to specific questions.Therefore , Electronic Tele-marketing complements traditional tele-marketing , reducing the cost of doing business. Electronic Tele-marketing will enable smaller companies to offer high quality services as any large company.
Platforms / Requirements
There are various tools existing in the Internet technology today which enables effective development of web applications.For the above mentioned project , we have identified the following web tools which would enhance the development for a virtual shopping website.
HTML is a mark-up language that describes the structure of a web document content .It is a standard language that all browsers understand and interpret.When the Web was invented , the main attractions that brought people to the medium were Hypertext ( the capability to link pages together ) and the capability to display images inline with text.These two features made the web easy to navigate and visually appealing.
1. An overview of HTML Forms
However to make the web useful medium for commerce , information retrieval , and other high- powered applications ,more interactivity was necessary.To fulfill this requirement ,forms were added. Forms go hand in hand with CGI programming. One of the main use of CGI programs is to process and respond to input from forms.Search engines, Online stores and Web based surveys are all generally built with HTML forms as the front end and with CGI programs as the back end.
2. Creating Forms
The most basic structure of an HTML form is a form tag.The form tag encloses all input elements in the form.The key attribute of a form tag is ACTION.
Examine the following HTML form :
<FORM NAME= "exampleform" ACTION=" /cgi-shl/example.cgi" METHOD="GET">
Name :<INPUT TYPE="text" NAME="username" SIZE=40 MAXLENGTH=40><br>
Today's date :<INPUT TYPE="text" NAME="date" SIZE=10 MAXLENGTH=10><br>
<INPUT TYPE ="Submit" VALUE="Submit Form">
<INPUT TYPE ="Reset" VALUE="Reset Form">
</FORM>
3. Attributes of the FORM tag:
ACTION :- The ACTION attribute accepts a URL ;usually a URL for a CGI program that will process the data the user enters in the form.If you omit the ACTION attribute , the form is submitted to the page that created it.
METHOD :- The METHOD attribute specifies the method that returns the data to the Web Server.There are 3 methods of returning data to any server.
GET :- The default method for requests is GET.It is the easiest request method; it simply requests a document from the web Server.When the browser uses the GET method to request a document from the Web Server, the request looks like :
GET HTTP / 1.0 / index.htm
This request asks the server to send the document index.htm from the root directory of the Web Server , back to the browser.When a form is submitted using the GET method , the URL-encoded data is tacked onto the end of the URL that is requested ,with a question mark inserted between them as a separator. For example,the above form would generate the following request.
GET HTTP /1.0 /cgi-shl/example.cgi?username=sachin+gavankar&date=9%2F7%2F99%2F
The Web server knows to send everything after the question mark to the CGI script, example.cgi , for processing.But the problem with this method is it does not provide any privacy to the user because the form data is sent to the server as a part of the header.Fortunately, we have the POST method ,which provides an alternative way of sending data.
POST :- To use the POST method, one has to add the attribute,METHOD=POST ,to the form tag.so,returning to the example given above , data submitted using the POST method would look like :
POST HTTP /1.0 /cgi-shl/example.cgi
Content-Type : application/x-www-form-urlencoded
Content -Length : 43
... Other Optional header lines ...
username=sachin+gavankar&date=9%2F7%2F99%2F
A blank line is included between the header and the posted data to let the server know when the browser is finished with it's header and is starting to send the actual form data.Content type specifies to the Server, the type of data being sent and the Content length tells the Server how large (in bytes) the data portion of the request is.
HEAD :- Another method that is almost never used in practice is the HEAD method.It works exactly like the GET method ,except that when the Server responds to the request ,only the headers are sent.The actual document that was requested is not sent.This method is mainly used for testing purposes.
TEXT ENTRY :- The first type of tag is the TEXT type.It consists of a single line field in which the user can type data.The required NAME attribute is sent along with the data entered in the field to the Server.Several other optional attributes can be used with the Text type.The SIZE attribute specifies how large the Text input will be when it is displayed in the browser.The MAXLENGTH attribute specifies the maximum number of characters that can be entered in the Text area.
<INPUT TYPE="text" NAME="username" SIZE=40 MAXLENGTH=40>
SUBMIT BUTTON :- Another type of input tag in the sample form is the SUBMIT type.The SUBMIT button sends the data in the form ,back to the Server for processing.The VALUE attribute specifies the label placed on the button.
<INPUT TYPE ="Submit" VALUE="Submit Form">
RESET BUTTON :- The final input tag in the example form is the RESET type.The RESET type returns all the values in the form to their defaults.You can include the Reset button so the the user can clear all the fields in the form.
<INPUT TYPE ="Reset" VALUE="Reset Form">
Most often when the user submits a form , you need to make sure that they have entered valid information in the fields in the form ( or that they have atleast entered information in the fields where it is mandatory.).As we know, everytime the user submits a form , a program on the Web Server is launched , the information from the form is processed and the response is sent back to the browser.This transaction uses a lot of resources , both in terms of network bandwidth and processing time on the Server.
Fortunately, you can use JavaScripts to validate the contents of the form before it is sent to the Server.By validating the form content with JavaScripts , you can avoid a lot of extra work for your Server and your Network and provide qiucker response to your users. JavaScript code is included inside a webpage and executed by the Web Browser.
<FORM NAME= "exampleform" ACTION=" /cgi-shl/example.cgi" METHOD="POST" onSubmit="return validateform()">
Name :<INPUT TYPE="text" NAME="username" SIZE=40 MAXLENGTH=40><br>
Zip code:<INPUT TYPE="text" NAME="zipcode" SIZE=6 MAXLENGTH=6><br>
<INPUT TYPE ="Submit" VALUE="Submit Form">
<INPUT TYPE ="Reset" VALUE="Reset Form">
</FORM>
The important addition to the above form is the onSubmit attribute which tells the form to run the JavaScript function validateform( ), when the user presses the Submit button.The script ,first, inspects the fields and if the data is acceptable , the form is submitted; otherwise the script displays an error in the form of an alert message box.
function validateform ( ){
if (document.exampleform.username.value = = "" || document.exampleform.zipcode.value = = ""){
alert ("Please fill out the form");
return false;
}
}
The above JavaScript example function makes sure that a value is entered in both fields before the form is submitted.When the form finds out that the validateform function returned a false value ,it cancels the submission of the form.To include a JavaScript function into a webpage ,you need to include it in the header inside the <SCRIPT> </SCRIPT> tag.
PUTTING IT ALL TOGETHER:
<HTML><HEAD><TITLE>Validate Form </TITLE>
<SCRIPT LANGUAGE="JavaScript"><! --
function validateform ( ){
if (document.exampleform.username.value = = "" || document.exampleform.zipcode.value = = ""){
alert ("Please fill out the form");
return false;
}
} // -->
</SCRIPT></HEAD>
<BODY>
<FORM NAME= "exampleform" ACTION=" /cgi-shl/example.cgi" METHOD="POST" onSubmit="return validateform()">
Name :<INPUT TYPE="text" NAME="username" SIZE=40 MAXLENGTH=40><br>
Zip code:<INPUT TYPE="text" NAME="zipcode" SIZE=6 MAXLENGTH=6><br>
<INPUT TYPE ="Submit" VALUE="Submit Form">
<INPUT TYPE ="Reset" VALUE="Reset Form">
</FORM></BODY></HTML>
What is a Web Server ?
Basically , a Web Server is a program that runs in the background on a computer , listening for requests from Web browsers.When it receives a request ,it replies with either the requested document or an error message.Most Web Servers also provide back-end technologies like CGI that enable the WebServer to connect with existing applications to provide interactivity and information retrieval.Some other back-end technologies are Active Server Pages and Netscape Livewire .
Site structure :
Where should you place your HTML documents ?
When you install a Web server on any computer , certain directories are assigned to hold HTML documents , CGI programs and other files.The directory which holds HTML documents is usually referred to as the document root.For example , if you install O' Reilly's Website Server ,the document root directory would be /htdocs .If a user attempts to connect to connect to your site by entering " http://www.example.com/ " in the browser ,your web server will send the default document from the document root.In other words , to your web server , / maps to the directory /htdocs on your machine.
Where should you place your CGI programs?
Now we need to consider where CGI scripts are placed.Some web servers allow you to place CGI scripts along with your HTML documents. But this poses a security risk ,as a misconfiguration in your server would enable users to read and perhaps exploit your CGI programs.Fortunately, most web servers provide a special directory in ehich you can store CGI programs. This directory ,usually called cgi-bin or cgi-shl (in O'Reilly's Website Server), is outside the document root and provides a secure place in which to put CGI programs.This prevents the user from reading your CGI programs.
What is CGI ?
The Common Gateway Interface ,better known as CGI ,connects Web Servers to external applications.CGI can do two things .It can gather information sent from a web browser to a web server and make the information available to an external program and also can send the output of a program to a web browser that requests it.One of the main use of CGI programs is to process and respond to inputs from forms.Forms go hand-in-hand with CGI program.
Advantages of CGI :
How CGI Works ?
The following steps occur in any CGI transaction.
What is ODBC ?
Open Database Connectivity ,or ODBC , is an Application Programming Interface that adds a layer of abstraction between Databases and applications.The problem with databases is that there are different methods for accessing each one.If you write your code to access an Oracle database and you later need to access Informix database , all of the code has to be re-written.If you use ODBC to connect to your database , all you have to do is write your code to access the ODBC API , which then connects to the appropriate database and translates your code into native code for that database.
To use ODBC , an application program must use the ODBC API calls as defined in the standard .In addition , the SQL statements used must comply with the ODBC SQL syntax.The database side of this open connectivity is provided by drivers, which are contained in Dynamic linked Libraries (DLLs).These drivers will tranform the ODBC API finctions into function calls supported by the particular Data Source being used.Similarly , the drivers transform the ODBC SQL syntax into a syntax accepted by the Data Source.Different Data Sources can be accessed by just loading a different DLL.
The advantage of using ODBC is that you can connect to any database that has ODBC drivers available using the same code. The disadvantage is that it adds an extra layer of processing between the application and the database that can reduce performance.
Components of ODBC :
The ODBC architecture consists of 4 major components , described as follows :
Database format :
We have used the
following format for our dBase database.You can use any database
,but the name of the fields in the table should match ours if our
program is to work on your machine.
| IDNO | NAME | ADDR | ADDR1 | CITY | ZIPCODE | PAYMENT | EMAIL1 | |
| IDNO | PROD_ID | PROD_DESC | QTY | COST_ITEM | TOT_COST |
| PROD_ID | COST_ITEM |
How to setup ODBC environment ?
Click on Start
| Settings | Control Panel | ODBC (32 bit).
Click System DSN. Click Add.
Here you should select your database driver
( in our case we selected Microsoft dBase driver (*.dbf)).
Click on Finish.
| Data Source Name | Name of index file |
| RAVI | R .dbf |
| PRODS | S .dbf |
| COST | T .dbf |
Now a dialog box would appear where you would have to enter
DATA SOURCE NAME and DESCRIPTION.
Enter the contents of the above table (DSN column) in each case.
Select the appropriate version number of your
database (e.g : dBaseIII ,in our case).
Deselect the checkbox ( Use current directory)
Click on Select Directory and choose the path to
your database directory. ( eg : c:\dbaseIII ).
Click Select indexes and choose your .dbf file
from the given list. (eg : R.dbf for RAVI as
our DSN,
S.dbf for PRODS as our DSN).
The Structured Query Language , or SQL , is a standard language for retrieving records from databases. You can embed SQL in your CGI programs to retrieve records from databases and include them in your web pages.Since SQL is an open standard , the SQL statements are portable and they should work with any database package.This makes your code portable
We will now refer to the following sample table for this session.Let us call this table 'StudentData'.
| Identity Number | FirstName | LastName | Qualification | Age |
| 334 | Prasen | Karlekar | Architect | 25 |
| 445 | Ravi | Jagasia | B.Com | 27 |
| 556 | Sachin | Gavankar | Engineer | 22 |
We will now review some important SQL commands.
The SELECT statement: The most common and the most important statement in the SQL language is the SELECT statement , which is used to retrieve data from the database. e.g :
SELECT IdentityNumber , FirstName ,LastName FROM StudentData;
This statement extracts the data from each of the specified columns for every row in the StudentData table.
SELECT FirstName FROM StudentData WHERE Age > 25;
This statement extracts the FirstName field from all the records where Age is greater than 25 .
SELECT FirstName ,LastName FROM StudentData WHERE Age > 25 AND Qualification = Architect;
This statement wouldn't return any records as seen in the above table.
Adding ,Deleting and Updating Records
In addition to using SQL to retrieve records , you can also use it to modify the actual contents of databases.There are separate commands to add , delete and modify a record from a table.
Adding a record : The INSERT command is used to add a record to an existing table. For e.g.
INSERT INTO StudentData VALUES ('666','Nikhil','Gavankar ','MBA','25');
This instruction loads the values in a new row of the StudentData table , in the order that was originally defined when the table was created.If you want to specify the list in an order other than the default , you need to use the following syntax of the same instruction.
INSERT INTO StudentData ( 'LastName','FirstName','Age','Identity Number','Qualification') VALUES ('Gavankar','Nikhil','25','666','MBA' );
Deleting records: You can use the DELETE FROM command to delete records from a table.You can use any WHERE expression that works with the SELECT command to choose records to delete. For e.g.
DELETE FROM StudentData WHERE LastName ='Gavankar';
This statement will delete all the records where LastName ='Gavankar'.
DELETE FROM StudentData WHERE LastName ='Jagasia' AND Age>'22';
This statement will delete the complete record where it finds a match for the WHERE clause.
Modifying records : Using the UPDATE command ,you can select records using WHERE and change only those fields in the record that you specify.
UPDATE StudentData SET Qualification='MBA' WHERE FirstName='Sachin';
This command changes the Qualification to 'MBA' for every record with FirstName='Sachin'.
The project is divided into two logical units : The web page design and the Shopping Mall.
The Web page was designed taking into consideration ,the Client's needs and user friendliness.This was achieved using FrontPage Express ,provided by Microsoft Internet explorer 4.0. The index page of the site included all the necessary instructions that the Client was deemed to follow along with a pleasant welcome,This page also linked to a Registeration form which was mandatory for every Client ,so that he could be registered with us.This was done so that the server could have all the particulars of each and every Client that visits the site.The Client , if registered successfully , was linked to the Shopping Mall.
The Shopping mall is a user interface and forms the heart of the project.It consists of GIF files of products to be displayed along with their description such as product ID and cost. Here, the user can just browse through the Shopping Mall and if he decides to place an order ,he can do so by clicking on 'Add to Shopping Cart' after he selects the Item(by checking the Checkbox) and enters the requisite quantity (in the Textbox provided).Any any point in time ,the client is given the liberty to view the items in his shopping cart by clicking on 'View Shopping Cart'.Here he is also given the option to modify the contents of his Shopping cart (either by deleting any particular item or updating the required quantity of the same).Also ,the client is given an option to end his shopping session by clicking on Exit where he is provided with an invoice if he has shopped on the network.But here no modification option is provided to him.Once he clicks on Exit , his Shopping particulars are deemed full and final .
Session management is one of the key building blocks of interactive,large-scale Web applications.The capability to conduct transactions that span more than one page and to make individual sessions for every user who visits your site , employ this technique.
Magic cookies , or cookies for short , are used by servers to store information with the client that they can retrieve later.This information could be of any type.It could be the login-name and password of the Client ,or could be the I.P address of the client or even some identity number of any client visiting an online shopping mall . Cookies can be used to store any of the above information .Although ,placing a cookie is not illegal ,many users consider it to be unethical to gather information about them without their knowledge or consent.
How Cookies work ?
Cookies are just another
header sent with a request or a response.When a browser sends a
request to a site that uses cookies ,the server sends a cookie to
the user in the response header .The cookie is stored by the
Client. Anytime the user visits a page in the domain specified by
the cookie , it sends the information stored in the cookie , back
to the server.
To use cookies for session management , websites usually send a
unique ID number to a user ,which is returned every time the user
requests a page stored in the domain specified in the cookie .The
web server can store save information like, username and password
,interface preferences ,or even the contents of the Shopping Cart
under that unique ID.
Set- cookie : Session_ID :
0001 ; path = / cgi-shl / ; domain = .sachin.com ; expires =
Wednesday,21-April
98 01:15 :00 IST
Session_ID is the name of
cookie and 0001 is the value of the cookie .
path = /cgi-shl / is used for CGI programs only.Path
specifies which entities on the server can receive the cookie.
domain = .sachin.com specifies the domain to which cookies should
be sent. If ,in the above example , the browser connects to any
sachin.com domain viz www1.sachin.com or www3.sachin.bitsmart.com
,the cookie would sent.But if the cookie used the domain=
www5.sachin.sosmart.com , the cookie would only be returned to
that server only .
expires : Denotes the time (and date ) of expiry of
cookie . This attribute is mentioned if you want to store the
cookie for a specific period. Cookies with no expiry date ,are
deleted when the current session is terminated .Such cookies are
useful for tracking a single web session.
In short ,cookies can be used to
save a user's information so that the user would not have to
enter it everytime the user visits the site.
The source code of our project is divided into various modules.
This project on Virtual Shopping can further be made more
user-friendly by incorporating the following ideas.
When the user logs on to the Shopping Network , he is linked to a
Registration Form where-in he is supposed to enter his personal
details viz Name , Address , e-mail etc.
Anyone who wants to enhance this project could provide a login
name and password option to every user so that the user would not
have to re-enter those trivial details again , the next time he
visits the site.Hence , for the first time ,the user has to
undergo certain formalities before he is registered.After he is
registered successfully , provide him with an option of entering
a login and password. The next time he visits the site , the
index page should have a link to 'Registered Users only' where he
would just have to enter his login and password.The rest of the
details should be recovered from database automatically by you.
Another option besides the above is to keep track of your user's preferences.You could plant a permanent cookie in your client's machine which would keep track of all his favourite pages on your site. Hence , when the user logs in to your site,next time , you could modify your Shopping Mall according to his preferences rather than having the same for anybody . This dynamic nature would appeal to the user very much.
PROJECT TEAM :
Sachin Gavankar
Prasen
Karlekar
Ravi Jagasia