E-COMMERCE - IT430
VU
Lesson 01
E-COMMERCE
Course outline
E-Commerce and its types, Internet and WWW Basics, Internet standards and protocols, IP addressing,
Data communication on internet, Domain name system
Networking devices - Bridges, Switches, Routers etc., Role of ISP's on Internet, Getting Domain name
and IP addresses, Understanding electronic mail
Markup languages and the Web, Web designing using HTML, CSS and Java Scripting
Client side & server side processing, Cookies, Maintaining state in a stateless environment, two tier/n-
tier architecture
Security issues on the internet, Firewalls, Proxy Server, Virtual Private Network
Cryptography and Public key infrastructure (PKI), Certification Authorities and Digital Certificates,
Digital signatures Technology
Electronic Payment Systems - Virtual Pin payment system, Centralized account system, Electronic
Check, E-Cash, SSL and SET based payment systems
E-business- advantages/disadvantages, Paper and electronic catalogues
Electronic Data Interchange (EDI)
E-business models
Internet marketing
Data mining and knowledge discovery Process, OLAP, Types and business application of data mining
E-business strategy, supply chain/value chain analysis and Porter's model, role of e-commerce in
competitive strategy
E-banking, ERP
Legal/policy issues in e-commerce -salient features of Electronic Transactions Ordinance, 2002 in
Pakistan
Territorial jurisdiction and conflict of laws, online contracts, online defamation, Copyright in
Cyberspace
Issue of ISP's liability, domain-name and trade mark conflicts, privacy issue on the internet, Cyber
crimes
Suggested books
Electronic Commerce (4th edition) by Gary P. Schneider
Electronic Commerce : Security, Risk Management and Control by Greenstein & Feinman
Electronic commerce - A Managerial Perspective by Turban et al.
Absolute Beginner's Guide to Networking (3rd edition) by Joe Habraken
Creating a Web Page (5th edition) by Paul Mcfedries
Web Security, Privacy & Commerce by Garfinkel & Spafford
Data Mining - Concepts & Techniques by Han Kamber
E-commerce - Strategy, Technologies and Applications by David Whiteley
Internet Law in Canada (6th edition) by Michael Geist
(c) Copyright Virtual University of Pakistan
1
E-COMMERCE - IT430
VU
E-Commerce definition
Electronic commerce is an emerging concept that describes the process of buying and selling or exchanging
of products, services and information via computer networks including the internet
E-commerce classification
A common classification of EC is by the nature of transaction:
Business-to-Business (B2B): electronic market transactions that take place between organizations
Business-to-Consumer (B2C): retailing transactions with individual shoppers - typical shopper at
Amazon.com is a consumer
Consumer-to-Consumer (C2C): consumer sells directly to consumers, examples -individuals selling
in classified ads, auction sites allowing individuals to put up items for auction - e.g, e-bay
Consumer-to-Business (C2B): individuals who sell products or services to organizations and those
who seek sellers and conclude a transaction
Intra Business (organizational) EC: all internal organizational activities involving exchange of
goods, services or information, selling corporate products to employees, online training and cost
reduction activities
Non-Business EC: academic institutions, not-for-profit organizations, religious/social organizations
and government agencies using EC to improve their operations, customer service and reduce expense
Basic Definitions
Web client- machine that initiates internet request
Web server - machine that services internet request
Browser - software at the client side to interact with web data
Intranet - an internal network of computers confined to a single place
Extranet - when two or more intranets are connected with each other, they form an Extranet - e.g, Virtual
Private Network
Internet - a global network of networks is defined as internet
Internet presents a two-way client server communication model as shown in Fig. 1 below:
Client-Server Model
Fig. 1
What is the WEB?
The Web is a protocol that uses the internet as the communication structure. It links documents stored in
computers that communicate on the internet. It is based on Hypertext Transfer Protocol (HTTP) - native
protocol of WWW designed for making web page requests.
HTTP is a four step process per transaction
1. Client
Makes an HTTP request for a web page
(c) Copyright Virtual University of Pakistan
2
E-COMMERCE - IT430
VU
Makes a TCP/IP connection
2. Sever accepts request
Sends page as HTTP
1 Client downloads the page
2 Server breaks the connection
HTTP is stateless because in the fourth step the server breaks the connection. We can say, therefore:
Each operation or transaction makes a new connection
Each operation is unaware of any other connection
Each click is a new connection
Side Effect of HTTP Transfers
A record is left of all web transaction in a file that resides at the server called common log file. Good news
is that some user data (record of his visits to the web sites) is recorded in a particular format in the log files.
Bad news is that user privacy is not maintained.
What can you do with this data?
Rearrange your site by knowing which portions of your web site are popularly accessed and which are
ignored by the users
Change your marketing strategy - e.g., you can introduce some promotional scheme for boosting the
sale of ignored items
Make a mailing list - you can trace the location from where customers are visiting and prepare a mailing
list for marketing purposes
(c) Copyright Virtual University of Pakistan
3
E-COMMERCE - IT430
VU
Lesson 02
WHAT IS A NETWORK
A network can be anything from a simple collection of computers at one location connected through a
connectivity media to the internet (a global network of networks). Local Area Network (LAN) is a server-
based network confined to a particular area/place. Most LANs consist of many clients and a few servers.
Fig. 1 below shows a simple LAN setup:
Fig. 1
Why networking your computer
We network our computers to share resources and communicate. We can do networking for:
1
File sharing
2
Hardware sharing - printer sharing, for example
3
Program sharing
4
User communication through a machine called e-mail server
Network protocol
Network protocols are those standard rules using which computers on a network communicate and
exchange data with each other. A group of protocols that prepare the data for communication on the
network is called the Protocol stack.
International organization for standard's (ISO) model
In 1970's came ISO's OSI model - a conceptual model for network communications. OSI stands for Open
System Interconnection Reference Model and it proposes a 7 layer architecture. Each layer (except physical
layer) at the sending machine sends instructions through its header to the receiving machine as to how the
accompanying data be interpreted or treated by the receiving machine. Header is a piece of information
(c) Copyright Virtual University of Pakistan
4
E-COMMERCE - IT430
VU
which is attached to the data at its beginning by each layer except the physical layer. The process of moving
the data down the OSI Protocol stack at the sending machine is called Encapsulation, and the process of
moving the data up the OSI stack at the receiving side is called De-encapsulation. Fig. 2 below shows names
of the 7 layers of the OSI model which are numbered from bottom up.
Fig. 2
Application layer
It sits at top of the OSI model. Requests related to file transfer and database queries are handled by this
layer. Two very important protocols, namely, HTTP and FTP (file transfer protocol) operate at this layer.
Presentation layer
It is the translator of the OSI model. It provides instructions through its header that how the accompanying
data should be formatted by the receiving machine. MIME-multipurpose internet mail extensions protocol
operates at this layer to define file formats and data types
Session layer
It provides instructions about the nature of communication link between the sending and receiving machine
during a session. A combination of protocols called Session Protocol Data Units work at this layer. Three
modes of communication are simplex, half-duplex and full-duplex. Simplex means communication in one
direction only. Half-duplex means communication in two directions but one party can send data at a time.
Full-duplex means communication in two directions while both parties are able to send data simultaneously.
It also places special checkpoints on data packets to trace any lost packets.
Transport layer
TCP (Transmission Control Protocol) or UDP (User Datagram Protocol) operate at this layer. It has two
functions. It converts the data into data packets. Secondly, it is responsible for flow control of data. TCP is
(c) Copyright Virtual University of Pakistan
5
E-COMMERCE - IT430
VU
more reliable as it is acknowledgment based as opposed to UDP which does not use any system of
acknowledgment for the delivery of data packets.
Network layer
It is responsible for providing IP addresses on data packets using IP protocol. Routing Information
Protocol (RIP) also operates here which enables routers to build their routing table. Another protocol,
Address Resolution Protocol (ARP) is also designed to operate at network layer.
Data link layer
It places data packets into data frames. Network Interface Card Drivers/Protocols operate at this layer. It is
used to identify MAC or hardware address of computer machines. A mathematical calculation, Cyclical
Redundancy Check (CRC), takes place here to confirm integrity of data frames.
Physical layer
It has got no header. All information including the header information is converted into binary data at this
layer. It results into the generation of electric signals as 1s and 0s are queued up and travel along the
connectivity media to the receiving side.
Internet layers- TCP/IP stack
Internet communication model (TCP/IP Stack) proposes a 4 layer architecture. Following are the names of
internet layers that map with the OSI model's layers:
Application layer is equivalent to OSI model's Application, Presentation and Session layers
Host-to-Host Layer is equivalent to OSI model's Transport layer
Internet layer is equivalent to OSI model's Network layer
Network Access layer is equivalent to OSI model's data link layer
(c) Copyright Virtual University of Pakistan
6
E-COMMERCE - IT430
VU
This mapping of layers is also shown in Fig. 3 below:
Fig. 3
In the following table (Fig. 4) there is a list of important protocols that operate at the TCP/IP stack.
Fig. 4
IP addressing
It is the logical addressing scheme used to identify computer machines on the internet. Each computer has a
unique IP address provided by IP protocol for a given session. It is represented by four decimal numbers
separated by a period e.g, 140.57.220.200 (see Fig. 5 below). Computers see this information as a stream of
32 bits.
(c) Copyright Virtual University of Pakistan
7
E-COMMERCE - IT430
VU
Fig. 5
You can look at figures 6 to 8 below to revise the basic concept of conversion of decimal numbers into
binary and from binary into decimal.
Fig. 6
(c) Copyright Virtual University of Pakistan
8
E-COMMERCE - IT430
VU
Fig. 7
Fig. 8
Classes of IP address
There are five classes of IP addresses, namely, A, B, C, D and E. Classes A, B and C are for general public
use, whereas Classes D and E are used by people belonging to certain special groups. To find which class a
particular IP address belongs to, the rule is to look at the number in the first byte. If this number falls
within the calculated range of a specific class, then we can say that this IP address belongs to such particular
class.
(c) Copyright Virtual University of Pakistan
9
E-COMMERCE - IT430
VU
Fig. 9 below explains the logic how we can calculate these ranges:
Fig. 9
By rule, in class A networks first byte would refer to the network address and the remaining three bytes to
the host machines on that network providing a very large network. In class B, the first two bytes indicate
the network address and the last two bytes indicate the host machines on that network giving rise to a
medium-sized network. In class C, first three bytes refer to the network address and the last byte to the host
machines on that network, which would therefore be a very small network. (See Fig. 10 below)
Fig. 10
(c) Copyright Virtual University of Pakistan
10
E-COMMERCE - IT430
VU
Lesson 03
HOW MANY CLASS A, B, C NETWORKS AND HOSTS ARE POSSIBLE?
Note that 126 class A networks are possible (0 and 127 are not used for general purposes). Each class A
network can accommodate a maximum of 16 million hosts on it. There are 16384 class B networks possible
and each can host upto 65000 host machines. There are 2 million class C networks possible each having the
capacity to accommodate upto 256 host machines on it.
Subnet mask
An IP address is meaningless for the computers unless it is accompanied by a subnet mask. It tells to the
computer machines that what part of the accompanying IP address corresponds to the network address and
what part corresponds to the host machine on that network. A subnet mask is also represented by four
decimal numbers separated by a period. Default subnet masks for class A, B and C types of IP addresses are
as under:
Class A: 255.0.0.0
Class B: 255.255.0.0
Class C: 255.255.255.0
IP version
The existing IP scheme (version 4) is likely to be replaced by IP version 6. It would provide 128 bits IP
38
addresses in hexadecimal format. According to an estimate a total of 3.4 x 10 addresses would then be
available.
Domain name system
A Domain Name is a user friendly name used to locate a web site on the internet. For example, vu.edu,
bestcomputers.com etc. Domain Name System (DNS) provides the structure and the strategy that is used to
refer to computers on the internet by these user friendly names. Domain Names are Unique. They are
assigned as one has to pay and register for them. With the help of DNS a domain name is translated into its
corresponding IP address (see Fig. 1 below). A fully qualified domain name is processed from right to left
for its translation into the corresponding IP address. A fully qualified domain name can be made up of a top
level domain (TLD), second level domain (SLD) and subdomains, as shown in Fig. 2 below. Seven
popular TLDs are ".com,.edu,.org,.gov,.net,.countryname,.int". SLDs represent the name of a
company/institution/entity. Subdomains represent the geographical or functional units of a
company/institution etc.
(c) Copyright Virtual University of Pakistan
11
E-COMMERCE - IT430
VU
Fig. 1
Fig. 2
Name resolution
The translation or resolution of a fully qualified domain name into its IP address takes place using the
hierarchy of special computer machines called Domain Name Servers. A DNS server is a server on the
network that maintains a database/table that contains the list of domain names and their corresponding IP
addresses. The name servers for TLDs are also called Root Name Servers. There is a program called
'Resolver' built into the browser, which sends the request for resolution of the domain name to the machine
called Local Name Server. Local name server then contacts the root name server, which looks into its
database and where possible provides the IP address of the name server below in the Hierarchy. Hence in a
similar number of steps the fully qualified domain name is completely translated into the IP address of the
web server where the requested web page is stored. The process of name resolution has been shown in an
example in Fig. 3 below:
(c) Copyright Virtual University of Pakistan
12
E-COMMERCE - IT430
VU
Name Resolution
Root
2
Name
Server
ecom.cs.vu.edu
3
vu.edu, 128.196.128.233
1
VU
Local
4
ecom.cs.vu.edu
Name
Name
ecom.cs.vu.edu
Client
Server
server
cs.vu.edu, 192.12.69.5
5
192.12.69.60
ecom.cs.vu.edu
6
ecom.cs.vu.edu
8
CS
Name
Server
7
Getting domain names and IP addresses
Domain names are administered in a hierarchy. At the global level the task of registration/administration of
domain names is supervised by the organization called Internet Corporation for Assigned Names and
Numbers (ICAAN). There are organizations working under ICAAN in different regions. For example,
APNIC is for Asia and Pacific Rim, ARIN for America and South Africa, RIPE-NCC for Europe and
North Africa etc. Each of the above are further connected to Internet Service Providers (ISPs) at the local
level. One can register one's domain name through an ISP also. Similarly, one can lease IP addresses from a
local ISP apart from the direct sources of IP addresses, that is, APNIC, ARIN or RIPE-NCC. ISPs can use
a server to dynamically supply the IP addresses to their clients for a session. Such a server is called DHCP
(Dynamic Host Configuration Protocol) server.
Media access control (MAC) address
Data to be delivered on a network has to be converted first into serial transmission. This is done through a
device called Network Interface Card (NIC) that must be installed in a computer on the network. NIC has
also got printed on it a 48 bits unique address called the MAC or hardware address of the computer
machine. In other words, it consists of 12 hexadecimal characters and can have different format as shown
below:
090017A9B2EF
09:00:17:A9:B2:EF
09-00-17-A9-B2-EF
Whereas the IP address of a computer may change from time to time, its MAC address would remain the
same unless the existing NIC is replaced with another. It can easily be inferred that there are 248 unique
MAC addresses possible (which is an unimaginably high number). An organization called Institute of
Electrical and Electronic Engineers (IEEE) administers the allocation of MAC addresses, worldwide. It
ensures that there is no duplication of MAC addresses by the manufacturers of NICs.
(c) Copyright Virtual University of Pakistan
13
E-COMMERCE - IT430
VU
Lesson 04
NETWORKING DEVICES
Topology of a LAN means its physical lay out. There are three main types of Network Topology, namely,
Bus Topology, Star Topology and Ring Topology as shown in Figures 1-3 below. There are two different
approaches to networking - Server-based and Peer-to-Peer approach. In server-based approach there is a
centralized server machine that can serve users' requests for the sharing of resources on a network.
Contrarily, in peer-to-peer, the machines on the network have an equal capability which means that they can
act both as a client and a server.
Fig. 1
Fig. 2
Fig. 3
(c) Copyright Virtual University of Pakistan
14
E-COMMERCE - IT430
VU
Networking devices
Hubs
These provide central connection point for a LAN. They organize cables and relay data signals to all
computers. There are ports on the back of a hub used to connect computers. They come in different sizes
and shapes.
Repeaters
Repeaters regenerate signals. A repeater would amplify the entire electric signal it receives. However, it has
no capabilities of directing network traffic.
Bridges
A Bridge is a combination of hardware and software. It has its own operating system. It helps to conserve
the bandwidth of a network. Bandwidth is the speed of a network. It indicates how many bits can be
transmitted across a network in a given time. In case of a bridge, the larger network is physically chopped
into smaller segments. A bridge can read the MAC (Media Access Control) or physical address of a
computer on data packets. MAC address is printed on the Network Interface Card. A bridge matches this
MAC address with the one stored in its table and judges that which particular segment does a data packet
belong to and accordingly sends that packet to such a segment. It does not allow other packets belonging to
other segments to spread to a particular segment and hence conserves the bandwidth. (See Fig. 4 below)
Fig. 4
Switches
A switch is also a combination of hardware and software having its own operating system. Like bridges, the
switches are also used to increase the bandwidth of a network. However, in case of a switch, a network is
virtually divided into small segments called Virtual LANs or VLANs. Similar type of users can be grouped
into a VLAN despite that they have no physical proximity or closeness. A switch would read the MAC
address on a data packet and match it with the list of MAC addresses of the user machines contained in it. It
then sends data packets only to that machine on a VLAN to which these packets relate. Packets belonging
to other VLANs are not allowed to enter into a particular VLAN, hence bandwidth increases.
Routers
Routers use a combination of hardware and software to forward data packets to their destination on the
(c) Copyright Virtual University of Pakistan
15
E-COMMERCE - IT430
VU
internet. They are more efficient and sophisticated than bridges and switches. They can divide large
networks into logical segments called Subnets on the basis of IP addressing scheme. A router can
communicate with another router on the internet with the help of Routing Information Protocol, and thus
it can build a routing table. This routing table contains information about different network addresses and
different routes for delivery of data packets to a host machine on a network. A router is a decision making
device. When a data packet arrives at a router it reads the network addresses from the IP address on the
data packet and determines the shortest possible path through which this packet can be delivered to its
destination.
Following diagram (Fig. 5) explains how routers on the internet backbone forward data packets by
determining the shortest possible path for the destination. In this example a client machine 'A' sitting on
network no. 140.57 sends data to a web server 'B' hosted at network no. 100. 'R1' is the router attached to
network no. 140.57. After consulting its routing table it can find that the shortest possible path for sending
data to machine 'B' is to forward data packets to 'R2', the router attached to network no. 100. In case there
is a blockade then'R1' can look for the alternative shortest path. Here, the alternative shortest path for the
delivery of data packets to 'B' can be R1-R3-R4-R2.
Fig. 5
Cabling options
Cooper-based cables
They are quite commonly used for connecting computers. They have two main types - coaxial and twisted
pair. In twisted pair there are two further options - unshielded twisted pair (UTP) and Shielded Twisted
Pair (STP).
Fiber optic cables
They are used on the internet. They deliver data at a very high speed. They use glass or plastic filaments and
the pulses of light as a data transfer method.
Telephone and electrical wire networks
They can also be used for connectivity purpose.
Wireless options
Wireless options include radio connectivity (wi fi, bluetooth), infrared connectivity and Satellite microwave
(c) Copyright Virtual University of Pakistan
16
E-COMMERCE - IT430
VU
transmissions.
Address resolution protocols (ARP) and address resolution protocol (RARP)
Each computer on the internet prepares a list of its IP address and corresponding MAC address using ARP.
Through RARP this information is forwarded to a network server. When a data packet arrives at the
destination router, it inquires about the corresponding MAC address form the network server, inserts it and
delivers the packet to that MAC address. A data packet therefore needs both IP and MAC addresses to
reach its destination. (See Fig. 6 below)
Fig. 6
Role of ISPs on internet
Internet Service Providers (ISPs) are those organizations which can provide internet connections, offer
services of web hosting, newsgroups and internet e-mail etc. They work in a hierarchy. The ISP at the top of
the hierarchy which is connected with internet backbone is called Internet Access Provider or IAP. An
internet trunk line or backbone passing through a metropolitan area is also called Metropolitan Area
Ethernet (MAE). IAPs are connected to MAEs at points called Network Access Points (NAPs). Trunk lines
allow IAPs to move data. The actual routing of data packets takes place on internet backbone (see Fig. 7
below).
Fig. 7
(c) Copyright Virtual University of Pakistan
17
E-COMMERCE - IT430
VU
Lesson 05
BASICS OF HTML
john@hotmail.com is the example of an email address. In order to deliver an email at this address, the part
'hotmail.com' would first be translated into the IP address of hotmail email server through DNS. A message
sent to John can then be stored in his account lying in the hotmail email server. There are three protocols
commonly used for emails. Simple Mail Transfer Protocol (SMTP) is used for sending email messages
between servers. In other words it is used for message uploads. Post Office Protocol 3 (POP3) or Internet
Message Access Protocol (IMAP) can be used to retrieve messages. They should also be configured with
SMTP. POP is used to download email to the client machine from the server side and the message is
deleted from the email server after download. On the other hand, in case of IMAP the message is not
deleted in the email server and thus can be reopened from another location/machine.
Hypertext markup language
Web documents are defined by the Hypertext Markup Language (HTML). It is a language of tags. A tag is a
special letter or key word enclosed in angular brackets. Most tags have their corresponding closing tags
represented by the same special letter or key word enclosed in angular brackets but preceded by a slash (/).
Depending upon which tag is used the enclosed content can then have a specific effect, style or format.
HTML is case independent. It has a fixed no. of tags and attributes. Attributes are those specific
words/letters prescribed for certain tags having certain possible values. The browser has the capability of
reading/interpreting each tag and its attributes used in a code and can show the result accordingly. One can
see the source code of an HTML page using the option View Source as shown in Fig. 1 below:
Looking at the Code
Under the View menu
Select Source
Fig. 1
An HTML document starts with tag which has its closing tag. The entire text work (including
tables, images, lists, buttons etc.) is contained within a pair of tag.A tag can also be used
before the body tag to provide title and other informationabout the web page. Here is the example of a
simple HTML document:
My first page
(c) Copyright Virtual University of Pakistan
18
E-COMMERCE - IT430
VU
A simple page with just this sentence
Result is shown in Fig. 2 below.
Fig. 2
Text formatting
-Paragraph tag can be used for text formatting e.g,
tag is used to provide a line break. -
Education provides a better understanding of life
would align the
enclosed text in the center.
- and are used for bold text.
- and are used for italic text.
- and are used of underlined text.
- and for bigger font size.
- and for smaller font size.
Font tag
Font tag defines various font properties. 'Size', 'face' and 'color' are its attributes. Attributescan be used
simultaneously in a tag as you can see below: internet and e-
commerce
Example code
This text is in the Arial font. (c) Copyright Virtual University of Pakistan 19 E-COMMERCE - IT430 VU Result is shown in Fig. 3 below. Fig. 3 Heading in HTML Six different levels of headings can be created in HTML. Their syntax is given below: and
tags in between as shown below:
Result is shown in Fig. 4 below. Fig. 4 Note that
tag is used to create a horizontal line. Width, size, align and noshade are its attributes.
and
tags do not have corresponding closing tag. You can also use square, disc or circle type of bullets,e.g,.
Consider the following example:
Introduction to e-commerce Page
goes here
Tables
Tables are used largely for page layout as well as for displaying information systematically. Any content that
can go in the body of an HTML page can go inside of a table. It must accommodate the content put inside
it. Tables are built row-by-row from the top to the bottom of the table.
Basics tags
Tables use the basic tag and
. All other table tags fit between these two tags.
(table row tag) and
(corresponding end tag) are used to create/add a row. (table data tag)
and (corresponding end tag) are used to divide a row into number of columns to create cells.
(table header tag) and (corresponding end tag) labels each column as a heading. To provide
the
caption
of
a
table
and
can
be
used.
A basic 2 row, 2 column table
(c) Copyright Virtual University of Pakistan
24
E-COMMERCE - IT430
VU
Spanning text across multiple rows or columns
Attributes 'colspan' and 'rowspan' are used in
tag for spanning the cells to a particular no. of columns or rows, respectively, as is shown in the examples below: Example - COLSPAN
Result is shown in Fig. 3 below:
Fig. 3
Spanning Text
Result is shown in Fig. 4 below.
Fig. 4
Table tag attributes
Border -
displays the cell boundaries, accordingly. Width -
sets the height of the table,
accordingly. Cellpadding -
refers to distance between the cells in pixels.
(c) Copyright Virtual University of Pakistan
25
E-COMMERCE - IT430
VU
Cellspacing -
refers to distance between cell boundaries andcontent enclosed in
terms of pixels. Color -
provides background color to the table (you can also
provide color name instead of RGB value code).
supplies an image in
the table background.
Attributes for
XSL code
We can provide the formatting instructions for the above XML code by writing an XSL
code as given below:
.........
Note that we use elements and in our XSL code to provide formatting
instructions for the corresponding XML elements.
(c) Copyright Virtual University of Pakistan
77
E-COMMERCE - IT430
VU
HTML and XML editors
General purpose text-editors for HTML are Notepad, Wordpad etc. However, there are certain HTML
editors that help create web pages more easily, e.g, Macromedia Dreamweaver and Microsoft FrontPage.
XML code can also be written in any general purpose text editor. However, there are special programs such
as Epic Editor, TurboXML which can facilitate the editing job considerably.
(c) Copyright Virtual University of Pakistan
78
E-COMMERCE - IT430
VU
Lesson 17
CLIENT AND SERVER SIDE PROCESSING OF DATA
You are now familiar with the fact that internet presents a two-way communication model, also called the
Client-Server Model as shown in Fig. 1 below. In the client server model some data is processed on the
client side and certain data is processed by the server on the server side.
Fig. 1
Client side processing
Data that is processed on the client side mainly includes the HTML code, most of JavaScript, applets and
cookies (in most cases). As a matter of fact, the browser installed on the client side has the capability to
interpret different HTML tags and display the result accordingly. JavaScript code can be included in the
HTML document to be executed on the client side by the browser. JavaScript is mainly used at the client
side for simple calculations and for pattern checking. We have already learnt this concept in the examples of
calculator and registration form where JavaScript functions were applied. Applets are compiled java
programs. Applet code is sent from server to the browser for processing. Examples of applets include
animation files, java games spreadsheets etc. Typically applets take more space on the window screen Applet
call example Consider the following HTML document where a special
In the above code, a text box called cookie is created. When a user clicks the button Set Cookie, the control
is shifted to the function update Cookie which creates a cookie in the hard disk of the client and opens or
reloads a fresh page for the user with the information of the current cookie written on it. Suppose that I
type the word Ahmad in the text box and click the button Set Cookie, then the cookie 'Ahmad' would be
consequently created and stored in the hard disk. See figures 2-4 below.
Fig. 2
Fig. 3
(c) Copyright Virtual University of Pakistan
80
E-COMMERCE - IT430
VU
Fig. 4
Cookies can be used to track customers online. Typically, a unique ID of the customer is stored in the
cookie file on the hard disk. Same ID is also stored in the database along with the record of previously
purchased items by the customer. When the customer again visits the online store, cookie (having customer
ID prepared against that URL) is transmitted by the browser to the server side. There, it is matched with the
ID in the database. This enables the merchant side to know that a particular customer (with a known buying
pattern) has come to visit again. By tracking the customer in this manner, personalized recommendations
for certain items can be made to the customer in real time.
Cookies can also be used to maintain state between two broken sessions. Thus, it is possible that some
information of the previous session is stored in the cookie file, and this information is available (through
cookie) to the server side on starting a subsequent session. For instance, in the code of a web form certain
information received form the user can be stored in the variables as shown below:
firstName=document.form1.first.value lastName=document.form1.last.value
email=document.form1.email.value
The coder can also define a variable to set the expiration date of the cookie as follows:
expirationDate="Friday, 01-Dec-11 12:00:00 GMT"
Then using cookie property of the document object all such information can be stored on the client hard
disk in a cookie file and can be used for maintaining state between two sessions:
document.cookie="firstname="+firstname+";lastname="+lastname+";email="+email+
";expires="+expirationDate
Fat vs. Thin Client
Fat clients have a lot of processing done on the client side. On the other hand, thin clients have very little
processing on client side, and most of the processing takes place on the server side.
(c) Copyright Virtual University of Pakistan
81
E-COMMERCE - IT430
VU
Lesson 18
APPLETS, CGI SCRIPTS
You know that Web Server is a computer that delivers (serves up) web pages. Any computer can be turned
into a Web server by installing server software and connecting the machine to the internet. A relational
database or simply database is a collection of information stored in tables. A database contains one or more
tables. Each table has a name and consists of columns and rows. Each column has a name. Most e-
commerce sites consist of a front end and a back end. Front end consists of that information which is
visible to the user and he can interact with the same through some interface. The back end comprises that
information which resides on the server side and is used to create certain dynamic results for the user. It
would include different programs or scripts that may be developed in different languages/tools. For an
effective e-commerce site there must be a real integration or compatibility between the front end and the
back end. We develop our back end mainly for two purposes - for querying with the databases (where we
have developed databases) and for the maintenance of state. We can use different tools (ASP, JSP etc.) for
that purpose depending upon their respective advantages/disadvantages. Server side processing can be
mainly categorized into four headings -CGI Scripts, Servlets, Server Side Scripts and JDBC/ODBC drivers.
CGI scripts
Term Common Gateway Interface (CGI) is defined as a standard method/protocol that allows data from
forms to be used by programs on the server. Script is a program running on the server. CGI scripts include
programs written in C, C++ or perl. Following Figure 1 shows a simple CGI setup. Suppose a client makes
an http request by clicking a hyperlink. This request is directed to a CGI script on the server side whose
reference would be given in the tag. The server would communicate with the CGI script on it with the
help of CGI protocol. The script would be executed. We would do its coding such that it generates a query
to the database to retrieve specific information. This information would then be supplied by the server to
the client side as an HTML document. You can also consider an example. Assume there are two links on a
web page (Fig. 2). When the user clicks on the hyperlink pertaining to IT Books, an http request goes to the
server at the address, which is shown as value of the href attribute of the anchor tag. This address is that of
a CGI script 'hello2.cgi', which is coded in such a way that it would generate a select query in SQL and from
the table IT books would retrieve all the information as a result for the user. The Perl code of hello2.cgi is
shown for a reference below.
Fig. 1
(c) Copyright Virtual University of Pakistan
82
E-COMMERCE - IT430
VU
Fig. 2
Code for Fig. 2
Click here to view the record of your previous transactions
List of IT Books for sale
Perl example - hello2.cgi (Not for exam)
print "\n";
print "\n";
print \n";
print "
"; &SetOracle; &RunSQL("Select * from ITBOOKS"); &StopOracle; print "\n"; Structured Query Language (SQL) SQL stands for Structured Query Language. It is used to make queries from databases. Its syntax may vary slightly from tool to tool. However, its general syntax is that we use select statement to retrieve data from databases. We use "*" after the word select then write the words "from tablename" in order to pick the entire information from a table. We can write the select statement specifically in case some specific information is desired to be retrieved as shown below: Select author,publisher from ITBOOKS where coursename='e-commerce' We can use insert statement of SQL in order to insert certain data in a database. For example in Fig. 3 below, you can see a web form with text boxes. When a user clicks at the Register! button (in fact a submit button), information provided by the user in the form would be shipped to the URL specified as value of the action attribute in the form tag. Here, that URL is that of an ASP file running on the server side. On clicking the Register!/submit button this file would be executed. We would code it such that it gives rise to an insert query. In other words, data provided in the form is picked up by the ASP file and subsequently inserted or recorded in a table in the databases. The format of Insert query used in ASP is shown for a reference below. We may also use delete and update statements in SQL for deleting and updating data in the tables. (c) Copyright Virtual University of Pakistan 83 E-COMMERCE - IT430 VU Fig. 3 Code for Fig. 3It is easy
My name is <%=firstname%> <%=lastname%> and my age is <%Response.Write
myage%>
Suppose that we want to collect data from a form (Fig. 4) using ASP and then resend a page
to the client having that information written on it. For that one can develop the following
ASP code. Note the use of "Request.form" for collecting data form the form.
<%@Language="VBSCRIPT"%>
<%option explicit%>
<%Dim loginname
Dim name
loginname=Request.Form("userlogin")
name=Request.Form("username")
%>
It is easy
My name is <%Response.Write name%> and I am going to use
<%Response.Write loginname%> as my login
Fig. 4
When a user clicks at Register! the information filled by him in the above two boxes would
be delivered to the ASP file whose code you have seen above. This would happen because
we keep the name or URL of the above ASP file as value of the action attribute in the form
tag.
VBScript offers a lot of flexibility for programming. We can use functions, If statements,
For loops etc. Consider the following example where a For loop has been used:
<%@Language="VBSCRIPT"%>
<%option explicit%>
Test1
<%
Dim myString="ecommerce"
%>
(c) Copyright Virtual University of Pakistan
86
E-COMMERCE - IT430
VU
<%If Time>=#12:00 AM# and Time<=#12:00 PM# then%>
Another option is to keep everything in databases. Here, information of each step is recorded in appropriate tables of a database itself and linked up with the help of a commonID. It is relatively more costly and time consuming option. We can use Servlets to write our scripts to speed up processing. It gets tricky, as one must have a solid knowledge of programming to implement these methods. Here, the idea is just to give you a broad concept/picture as to how the state is maintained. Client server architecture Note that we may have different tiers in client server architecture depending on where the processing of data takes place. In 1-tier architecture, the entire processing takes place at a single place/zone. For example, (c) Copyright Virtual University of Pakistan 88 E-COMMERCE - IT430 VU in Fig. 1 below, the processing of data only takes place in the main frame and different machines are attached to it just as display terminals.
Education provides a better
understanding of life
the enclosed sentence would accordingly be displayed in the center of the screen
due to attribute align and its value 'center'. One can also use Left or Right as values for the attribute 'align'.
tag is used to provide a line break. -
This is my main title
Here is the first paragraph. This is some bold textThis text is in the Arial font. (c) Copyright Virtual University of Pakistan 19 E-COMMERCE - IT430 VU Result is shown in Fig. 3 below. Fig. 3 Heading in HTML Six different levels of headings can be created in HTML. Their syntax is given below:
Level 1 - largest text
Level 2
Level 3
Level 4
Level 5
Level 6 - smallest text
Creating basic HTML For creating/viewing a web page take the following steps: 1 Open a text editor like Notepad or WordPad 2 Type away 3 Save as a "text" file and call it filename.html 4 Start up a browser 5 Open up your file 6 File menu -> Open 7 Browse to find your file 8 Click open and OK 9 To make changes go back to the text editor 10 Make your changes and SAVE 11 Go back to the browser 12 Reload - use 'Refresh' icon or 'Refresh' button in the View menu or F5 List in HTML- and
- and
- Item1
- Item2
- Item3
- Item1
- Item2
- Item3
Result is shown in Fig. 4 below. Fig. 4 Note that
tag is used to create a horizontal line. Width, size, align and noshade are its attributes.
and
tags do not have corresponding closing tag. You can also use square, disc or circle type of bullets,e.g,
- Square
- First>
- second
On Sale CassettesResult is shown in Fig. 5 below. Fig. 5 Commonly used formats of image files are .gif, .jpg etc. Common attributes of image tag are shown below, for example: Width and height attributes specify size of the image and align attribute specifies the positionof the image on the page. (c) Copyright Virtual University of Pakistan 21 E-COMMERCE - IT430 VU Downloading graphics To download an image from the web, do the following: 1. Right click on the image. 2. Choose 'Save Picture' or 'Save Picture As'. You can rename the image but you cannot change its type. 3. Select a place to save your image. It is usually easiest to reference images if you save them in the same folder as your HTML document. 4. Make a reference to the image in your html document using the tag. Note that you can also create your own images using a graphics package. (c) Copyright Virtual University of Pakistan 22 E-COMMERCE - IT430 VU Lesson 06 BASICS OF HTML Hypertext links are used to connect HTML documents. Text can be links. Images can be links. Links can by used for email also. An attribute 'href' is used in anchor tag , and its value is set as the URL of a web page or a file name which is required to be opened by clicking the hyperlink. Content enclosed between and becomes clickable. See the following example:Computer Science
Welcome to Virtual University in Pakistan Result is shown in Fig. 1 below. Fig. 1 In order to create a mailto link, one should use the following syntax: email address Changing colors in a page In order to provide a specific background color to a web page, an attribute 'bgcolor' is used in the body tag. We can also use 'text' and 'link' attributes, respectively, in the body tag to assign font colors to our text and hyperlinks, as indicated below: Instead of giving the color name as value of 'bgcolor' one can also provide value in terms of a six digit code based on hexadecimal numbers called RGB values, e.g, #00FF00 refers to pure green color. RGB values are set according to following rule: Red Green Blue Where we want to provide an image as a background for the page then the 'background' attribute is used in the body tag keeping its value as the name of that image file, e.g,Computer Science
Welcome to Virtual University in (c) Copyright Virtual University of Pakistan 23 E-COMMERCE - IT430 VU Pakistan Result is shown in Fig. 2 below. Fig. 2 Meta information Meta information is the information about the web page content, and is located in the of your HTML documents. It helps make documents easier to locate through search engines. Meta tag is used within the head tag for this purpose, as shown in the example below:Cell1</ TD> Cell 1 Cell 2 | Cell2 |
Cell3 |
tag for spanning the cells to a particular no. of columns or rows, respectively, as is shown in the examples below:
This line is extended to two columns | This does not | |
First Column | Second Column | Third Column |
This line is stretched to two rows | First Row |
Second Row | |
This does not | Third Row |
displays the cell boundaries, accordingly. Width -
tag Width - | specifies width of a cell with reference to the table width. Align - | is used to align the text in a cell accordingly (you can also use left and right as values of 'align'). Valign- | is used to vertically align the text in a cell (you can also use bottom or
middle as values of 'valign').
Using a table to set up a page with a margin
Set the table's height to 100% using the tag's height attribute. First column is the margin. Use 'bgcolor' or 'background' attribute to define color or image for the margin. Also set width of the margin as desired. Second column is where one can put all the regular text and the graphics. Note the following example: Result is shown in Fig. 5 below. Fig. 5 ' ' is the code for a blank space in HTML. Forms A form is a web page populated with text boxes, drop-down lists and commands buttons to get information from the user. Its basic tag is and . 'Action' and 'Method' are the two attributes used in the form tag as shown below to transport the information received form the user to a particular URL or a file: Types Submit/Reset button Text boxes Text area Check boxes Radio buttons Lists Submit and reset button To create a submit or reset button use the following instruction within the form tag: "Label" is the value that appears on the button. You may not want to use 'value' attribute. When the submit (c) Copyright Virtual University of Pakistan 26 E-COMMERCE - IT430 VU button is clicked, the form data is shipped to the URL specified by the tag's action attribute. Text boxes and text area To create a text box the value of 'type' attribute is set as 'text' in the input tag. To create abigger box called text area we use tag. The size of the text area is fixed on the basis of value of attributes 'cols' and 'rows'. Note the following example: Today's Burning QuestionResult is shown in Fig. 6 below. Fig. 6 In the above example 'name' attribute used in 'input' and 'textarea' tags is the unique name for the field. A field name is the information normally used by the server side to respond to the client side after the form has been submitted to it. (c) Copyright Virtual University of Pakistan 27 E-COMMERCE - IT430 VU Lesson 07 TEXT BOXES, CHECK BOXES, RADIO BUTTONS - - here 'value' attribute would pre-fix the information in the text box which is given as its value (e.g, http://) - -'size' is used to set size of the box. - -'maxlength' limits the length of the text in the text box. Check boxes are normally used to get yes/no or true/false information from a reader. Syntax is to keep value of 'type' attribute as 'checkbox' in the input tag. Using 'checked' attribute certain values can be displayed pre-checked in the checkbox. Moreover, 'Name' attribute indicates the unique field name for a checkbox. Example - Check boxDescribe Your Phobia!Result is shown in Fig. 1 below. Fig. 1 Radio buttons Instead of yes/no choices, you might want your readers to have one choice out of many options. For that Radio buttons can be used. General format You supply the same field name to all the radio buttons that you want to group together. 'Value' is the unique text string that specifies the value of the option when it is selected. Example - Radio buttonSurveyResult is shown in Fig. 2 below. Fig. 2 Selection lists General format and tags are the tags whichdefine the list items. If you omit "size" the list becomes a drop-down list. If size is two or more, the list becomes a rectangle with scroll bars for navigating the choices. Using 'Selected' attribute an item is selected by default. Multiple attribute allows the reader to select multiple items from the list. Example - lists Result is shown in Fig. 3 below. Fig. 3 (c) Copyright Virtual University of Pakistan 30 E-COMMERCE - IT430 VU Also, Extensible Style sheet Language (XSL) XML files are translated using another file which contains formatting instructions. Formatting instructions are often written in Extensible Style sheet Language (XSL). These formatting instructions are read over by special programs - usually these programs are written in Java programming language- called XML Parsers. Following diagram (Fig. 4) explains how web server might process http request for an XML page. Fig. 4 We write XSL rules that match various xml elements. For that consider the following example: XML code
|
IT Books
\n"; print "Description of available books"; &SetOracle; &RunSQL("Select * from ITBOOKS"); &StopOracle; print "\n"; Structured Query Language (SQL) SQL stands for Structured Query Language. It is used to make queries from databases. Its syntax may vary slightly from tool to tool. However, its general syntax is that we use select statement to retrieve data from databases. We use "*" after the word select then write the words "from tablename" in order to pick the entire information from a table. We can write the select statement specifically in case some specific information is desired to be retrieved as shown below: Select author,publisher from ITBOOKS where coursename='e-commerce' We can use insert statement of SQL in order to insert certain data in a database. For example in Fig. 3 below, you can see a web form with text boxes. When a user clicks at the Register! button (in fact a submit button), information provided by the user in the form would be shipped to the URL specified as value of the action attribute in the form tag. Here, that URL is that of an ASP file running on the server side. On clicking the Register!/submit button this file would be executed. We would code it such that it gives rise to an insert query. In other words, data provided in the form is picked up by the ASP file and subsequently inserted or recorded in a table in the databases. The format of Insert query used in ASP is shown for a reference below. We may also use delete and update statements in SQL for deleting and updating data in the tables. (c) Copyright Virtual University of Pakistan 83 E-COMMERCE - IT430 VU Fig. 3 Code for Fig. 3
To Register Please Enter The Following Information:
Insert Statement in ASP (not for exam) INSERT INTO Register(Name,Address,Password,Email) VALUES(Request.form("Name"), Request.form("Address"), Request.form("Password"), Request.form("Email")) Register is the table where information received through the form is to be inserted. Servlets Servlets are very fast Java applications on the server side which are available in an active form in the memory of the server. They use JDBC to connect to the databases. Server Side Scripts They basically include ASP, JSP or PHP. Active Server Pages (ASP) is the product of Microsoft, Java Server Pages (JSP) is the product of Sun Microsystems and Hypertext Preprocessor (PHP) is the product of Apache Software Foundation. Their code can be embedded within the HTML document and they use extensions (.asp), (.jsp) or (.php), as the case may be. The servers sees the extension of the file and processes (c) Copyright Virtual University of Pakistan 84 E-COMMERCE - IT430 VU the relevant ASP, JSP or PHP code embedded within the HTML code and provides the result of such code to the client side. ODBC/JDBC ODBC (Open database connectivity) and JDBC (Java based database connectivity) drivers are also present on the server side. Scripts or programs use these to establish connection with databases for querying. Basic difference between CGI scripts, ASPs, Servlets etc. Here, you can note some basic difference between CGI scripts, servlets, ASP, JSP etc. We know that the code we write is translated into an executable form. There are two ways to do this translation. One is that we compile the code or convert it into machine language using a software called compiler, as we use in case of C or C++. The other way is that we interpret the code (line by line) at the run time using a program called interpreter. Browser is an interpreter. Compiled code is usually faster than the interpreted one as regards execution. Technologies like ASP, PHP and Coldfusion interpret their code except the new version of ASP (ASP.net) where the code is compiled. In case of JSP a program called JSP engine compiles the code. This compilation takes place only once, and then the JSP page is converted into a Servlet. The property of a servlet is that it is always in an active form which means that it remains in the server memory. Therefore, any subsequent calls to the page have faster response time. This probably is the only main difference between a JSP and a Servlet. Another difference between ASP and JSP is that ASP mostly uses VBScript and JSP uses Java programming language for coding. Note that among the CGI scripts, Perl scripts are interpreted and C++ scripts are compiled. However, CGI scripts are generally believed to be relatively slow, since each CGI request generates a new process which is heavy for the system. Therefore, CGI scripts are no longer a very popular option. ASP We can discuss ASP a little more in detail. It runs best on IIS (Internet Information Server) which is freely available with Windows NT and Windows 2000. ASP engine is a piece of software that is a part of IIS and interprets/translates an ASP code. There are mainly seven predefined objects in ASP called intrinsic objects. To have some idea of the ASP objects, we can have a look at the two important ones, that is, request and response objects. Response object is used to send information to the client and Request object is used by the server to retrieve information from the client. ASP examples (not for exam) Following is the example of Response object. We use its "write" function to write some information on our web page. ASP normally uses VBScript as the scripting language. In ASP, a variable is generally defined using Dim statement as shown in the code below. ASP statements are contained within <% and %> which are called delimiters. VBScript by default assumes that any symbol that is not a keyword is a variable. This might cause serious problems when you are writing an ASP application. What if you mistype a variable name and it will be considered by the server as a new variable. To avoid this you must write Option Explicit at top of your each ASP file. <%@ language=VBScript %> <%option explicit%> <%Dim lastname Dim firstname Dim myage lastname="Ali" firstname="Imran" myage=30 %> (c) Copyright Virtual University of Pakistan 85 E-COMMERCE - IT430 VUGood Morning Pakistan
<%else%>Hello Everyone <% Dim j For j=1 to 3 Response.write mystring response.write "" Next %>
<% end if %> Result of the above code would be similar to the one shown in Fig. 5 below. Note that the words ecommerce are printed thrice due to for loop written in a specified format in VBScript. Fig. 5 (c) Copyright Virtual University of Pakistan 87 E-COMMERCE - IT430 VU Lesson 19 MAINTAINING STATE IN A STATELESS SYSTEM You know that http is stateless. Another reason why we need to write scripts or develop our back end is that we want to maintain state. In other words, we want to link different clicks/steps involved in an e- commerce transaction. When we go to an ecommerce site, we are generally asked to take three different steps, that is, provide Registration information, and make selection of items (Add to Cart) and Confirm Order. The question is how do we create link or maintain state among these different steps. There are following options available for programmers in this regard: A temporary file may be created on the server side and we code our scripts behind the steps/clicks - Register, Add to Cart and Confirm Order - in a way that the information of each step/click is stored in that temporary file using the same common ID. At the end our confirm order script puts this information in some database using insert query. Another method is to use the client side or cookies for maintaining state. Information regarding Registration and Add to Cart can be stored in cookies and at Confirm Order cookies against these URLs would revert to the serve side and be stored in databases against a common ID. We can also use hidden forms' fields. We keep data back and forth within forms to maintain state. Following is a piece of HTML code for a form (Add to cart) in which hidden fields are used. I have used pairs of input tags with type hidden and type checkboxes. (I can also use them in a For loop using Recordset object of ASP then it would be possible that these pairs of input tags are generated in a loop and information of records available in databases is directly picked up and printed for me). Because of type hidden the item name and item code/value for each item would be there in the form against each item but would remain hidden. When the user selects items (through check boxes) and presses Add to Cart his selected information would go to some script which would be coded such that it would open a new page with button Confirm Order. In this new form the item code or value of selected items would be present but would remain hidden. When a user presses the button Confirm Order the information of selected items is stored in the databases (through a script) against the item code present in the form, though hidden. We can say that state is maintained here between steps Add to Cart and Confirm Order in the sense that selections made in step Add to Cart were passed over or provided to the next step Confirm Order. Example - Hidden FieldsAnother option is to keep everything in databases. Here, information of each step is recorded in appropriate tables of a database itself and linked up with the help of a commonID. It is relatively more costly and time consuming option. We can use Servlets to write our scripts to speed up processing. It gets tricky, as one must have a solid knowledge of programming to implement these methods. Here, the idea is just to give you a broad concept/picture as to how the state is maintained. Client server architecture Note that we may have different tiers in client server architecture depending on where the processing of data takes place. In 1-tier architecture, the entire processing takes place at a single place/zone. For example, (c) Copyright Virtual University of Pakistan 88 E-COMMERCE - IT430 VU in Fig. 1 below, the processing of data only takes place in the main frame and different machines are attached to it just as display terminals.