What Is E-Commerce
What Is E-Commerce
G College
UNIT-III
DYNAMIC HTML WITH JAVASCRIPT
1)Opening a new window
Microsoft window software uses the Multiple Document Interface ( MDI) structure. The
application has a single global frame and one or more child frames. The child frames appeared
inside the parent frame.
Web browsers are based on a diferent model in which each window is independent. This
model is more used in UNIX when programming applications for X Windows system.
Syntax for opening a new window is
open ( URL, Name,[options] );
This method opens a new window which contains the document specifed by URL.
Example : var win = open ( D:/ bsc.html,bsc,width=170,height=200 );
Option Value Description
Menubar 1 or 0 Menubar of the window
Toolbar 1 or 0 Toolbar of the window
Scrollbars 1 or 0 Scrollbars of the window
Directories 1 or 0 Directories of the window
Status 1 or 0 Statusbar of the window
Resizable 1 or 0 Whether the window is resizable or not
Width Integer Width of the window
Height Integer Height of the window
Not all browsers open a new window at the specifed size. Some browsers open a
child window at the same size as the parent window. The following are the rules for reducing
random behavior of height and width. Some of the important points for using open command are
The parameter list must be inside a set of single quotes.
Do not have any spaces between the parameters.
Must use commas between parameters.
There can not be line breaks or spaces in the parameter string.
Example program:
<html>
<head>
<title> Opening a new window </title>
<script language="JavaScript">
function load()
{
var win=open("D:/bsc.html","bsc",'status=0,toolbar=0,width=250,height=130');
}
</script>
</head>
<body>
<p><a href="#" onclick="load()">Show</a></p>
</body>
</html>
This code loads bsc.html into a new window. In the open ( ) command the URL and
window name are optional. If we need to open a blank window, replace the URL with empty
quotes.
Department of Computer Science
Page 1 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
2) Messages and Confrmations
JavaScript provides 3 built-in window types. These are useful when we need information
visitors to our site. For example we may need to click a confrmation button before submitting
information to our data base. The three types of dialog boxes are.
prompt ( );
alert ( );
confrm( );
Prompt ( ) :- This command displays a simple window that contains a prompt and a text feld in
which user can enter data. This method has two parameters. They are
i) A Text string. ii) The default value.
Syntax : var variable = prompt ( String , default_value);
Example : var name = prompt (Enter Your name, );
Alert ( ) : - This command displays a window that contains a text string and OK button. This
may be used as worning.
Syntax : alert ( String );
Example : alert ( Good Morning
);
Confrm ( ) :- This command
displays a window that contains
a message and two buttons. They
are OK and CANCEL. This is useful when submitting form data.
Syntax : confrm ( String );
Example : confrm ( Are you sure to exit ? );
Example Program:
<html>
<head>
<script language="JavaScript">
var name= prompt("Enter Your Name"," ");
alert("Welcome Mr/Ms " + name);
</script>
</head>
<body>
</body>
</html>
Department of Computer Science
Page 2 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
3) Statusbar
The status bar is a small message area at the bottom of the browser window. In Internet
Explorer we can see the webpage symbol and word done. This area can be used to show a
message.
Some web developers like to use the browsers status bar as part of the site. Text strings
can be displayed in the status bar. The status bar usually displays helpful information about the
operation of the browser. Few people ever look at the status bar. Thus they will not notice your
message. By using DHTML techniques any thing can be done interestingly in the status bar.
Self: some times the script need to act upon the browser window in which it is running. The key
word self is similar to the window object. When the keyword self is used then the object can
identify itself or its browser.
Example Program:
<html>
<head>
<script language="JavaScript">
function show( )
{
self.status="This is about our college";
}
</script>
</head>
<body onLoad="show()">
<h1> About Status bar</h1>
</body>
</html>
Output:
4) Data Validation
It is important to validate data that is entered into our forms at the client side. Server
side scripting is very strong. There is delay between the user entering the data, validation, and
an error being returned to the user. A common technique for restricting access to a website is to
check User IDs against a list of valid users for security reasons. It is bad idea to do this type of
data validation at the client.
RegExp class is used to validate the data. Data validation is the process of ensuring to
submit only a set of characters which we require. Regular expressions can be created as follows.
Var reg = new RegExp (pattern, modifers);
Regular expressions are manipulated using functions which belong to either RegExp or
String class.
Department of Computer Science
Page 3 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
match ( pattern ) : - It searches for a matching pattern. It returns an array holding the results.
If no matches found it returns null.
exec ( string ) : - It executes a search for a matching pattern in its parameter string. It returns
an array holding the results of the operation.
Syntax : reg.exec ( string );
test ( string ) :- it searches for a matching pattern in its parameter string. It returns true if a
match is found. Otherwise it returns false.
Syntax : reg.test ( string );
Forms have an onSubmit event which is generated when the submit button is clicked.
Data validation is performed by the event handler which we create for the onSubmit event. The
following code checks for the valid user name.
Var name = document.forms[0].elements[0].value;
Var name_reg = new RegExp (^[A-Z][a-zA-Z .]+$, g );
The regular expression checks for the capital letter at the start of the line followed by one
or more characters. The valid character set includes upper and lower case letters and dots. If any
invalid character is encountered then the regular expression will return false. The following code
checks for valid age.
Var age = document.forms[0].elements[1].value;
Var age_reg = new RegExp (^[\\d]+$, g );
This time the regular expression accepts only digits from 0 through 9.
Example Program:
<html>
<head>
<title>Data Validation</title>
</head>
<body>
<form method="post" action="mailto:[email protected]" onSubmit="return validate()">
<center>
Enter Your Name <input type="text"> <br>
Enter Your age <input type="text"> <br>
<input type="Submit" value="Submit">
</center>
</form>
<script language="JavaScript">
function validate()
{
var valid=false;
Var name = document.forms[0].elements[0].value;
Var age = document.forms[0].elements[1].value;
Var name_reg = new RegExp (^[A-Z][a-zA-Z .]+$, g );
Var age_reg = new RegExp (^[\\d]+$, g );
if(name.match(name_reg))
{
if(age.match(age_reg))
valid=true;
else
alert("Age not match");
}
Department of Computer Science
Page 4 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
else
alert("Name not match");
return valid;
}
</script>
</body>
</html>
5) Rollover Buttons
Rollover buttons add great visual appeal to our pages.
This technique is used to give visual feedback about buttons to the user and location of the
mouse cursor.
This is useful where images are used as hyperlinks or where image map is used.
To make rollovers, we have to create the images for buttons. This can be done using any
graphics programs such as Photoshop.
It is very important that the two buttons have same size and same shape with diferent
color.
JavaScript rollover is simple because it uses two images which swap between as the mouse
is moved.
One image is created for the inactive state when the mouse is not over it.
Second image is created for the active state when the mouse is placed over it.
For example if we take two images imgon.jpg and imgof.jpg, the document object holds
an array of images. Each image in that array can be identifed by its name or position. The
events used for creating rollover buttons are
o onLoad
o onMouseOver
o onMouseOut
onLoad :- This event happens when the page is frst loaded into the browser.
onMouseOver :- This event calls a JavaScript function when the cursor passes over the image.
onMouseOut :- This event calls a JavaScript function when the cursor passes away from the
image.
The JavaScript code for onMouseOver event is
dcument.images[0].src=imgon.jpg;
The JavaScript code for onMouseOver event is
dcument.images[0].src=imgofpg;
Inactive Active
When onMouseout event occuredwhen onMouseOver event occured
Example Program:
<html>
<head>
<title>Rollover Buttons</title>
</head>
<body>
Department of Computer Science
Page 5 of 33
Home Home
III B.Sc Computer Science St.Marys Degree & P.G College
<a href="#" onMouseOver="imgon()" onMouseOut="imgof()">
<img src="redimg.gif"></a>
<script language="JavaScript">
function imgon()
{
document.images[0].src="greenimg.gif";
}
function imgof()
{
document.images[0].src="redimg.gif";
}
</script>
</body>
</html>
6) Writing to a diferent frame
Frames: Frame is a window that is part of the browser window. Frames are defned by using two
tags. They are <frameset> and <frame>
<frameset> :- This tag is used to divide the browser window into number of frames. The
following are the attributes of <frameset> tag.
Cols:- This attribute is used to divide the browser window into number of columns.
Rows:- This attribute is used to divide the browser window into number of rows.
Frame border: This attribute takes value as either 0 or 1. if the value is 1, then it shows frame
border otherwise it do not show the frame border.
Example : <frameset rows=30%,70%>
<frameset cols=20%,30%,* >
<frame> :- This tag is used to assign webpage source to each frame. The following are the
attributes of <frame> tag.
Src:- This attribute is used to specify the path of the webpage that is displayed in the frame.
Name:- This attribute specifes name of the frame.
Scrolling:- This attribute takes the value as either YES or NO. if the value is YES, then it shows
the scrollbar. Otherwise it do not show the scrollbar.
By combining frames and JavaScript we can create interactive web pages. Developing a
site with links in one frame and output in another frame provides easy movement through
complex data.In JavaScript the parent window is required for writing information that present in
one frame to another frame. The parent window has an array of all frames which can be referred
by their position in the array or by their name. this can be done in the following format.
parent.frames(framename).document;
Example Program.
Frames.html
<html>
<head>
<title>Writing to a diferent frame</title>
</head>
<frameset rows="40%,60%" border=0>
<frame name="f1" src="frame1.html">
<frame name="f2" src="frame2.html">
Department of Computer Science
Page 6 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
</frameset>
</html>
Frame1.html
<html>
<head>
<script language="JavaScript">
var f=parent.f1.document;
var sf=parent.f2.document;
var fn,mn,ln;
function show()
{
var frm=document.fr;
sf.open();
fn=frm.t1.value;
mn=frm.t2.value;
ln=frm.t3.value;
sf.writeln("<table border=6>");
sf.writeln("<tr><th>First Name<th>Middle Name<th>Last Name</tr>");
sf.writeln("<tr><td>"+fn+"<td>"+mn+"<td>"+ln+"</tr>");
sf.writeln("</table>");
frm.t1.value="";
frm.t2.value="";
frm.t3.value="";
sf.close();
}
</script>
</head>
<body>
<form name="fr">
First Name : <input type=text name=t1>
Middle Name : <input type=text name=t2>
Last Name : <input type=text name=t3>
<input type=button value="Show" onclick="show()">
</form>
</body>
</html>
Frame2.html
<html>
<head>
</head>
<body>
Data entered in frst frame comes here.
</body>
</html>
Output
Department of Computer Science
Page 7 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
7) Moving Images
DHTML provides special feature to move images around the browser screen.
Moving images means changing the position of image on the browser screen.
To change the position of the image, we need to change the values of top and
left properties of an image.
By incrementing the top value, the image is moved down from the current position.
By decrementing the top value, the image is moved up from the current position.
By incrementing the left value, the image is moved right from the current position.
By decrementing the left value, the image is moved left from the current position.
By moving images we can develop animated and attractive web pages.
Another way to move images around the webpage is by using layers.
A layer is the part of webpage that is created by using <div>.
Example Program
<html>
<head>
<title>Moving Images</title>
<script language="JavaScript">
var t=1;
function move()
{
if(t<=500)
{
Department of Computer Science
Page 8 of 33
top
left
Image
III B.Sc Computer Science St.Marys Degree & P.G College
document.getElementById("sun").style.top=t;
setTimeout("move()",10);
t=t+1;
}
}
</script>
</head>
<body onLoad="move()">
<div id="sun" style="position:absolute;">
<img src="sunset.jpg" height=100 width=100>
</div>
</body>
</html>
8) Text only Menu System
The most common use of DHTML is site menus.
There are many ways to provide navigation but creating global menus through
hyperlinks is most popular.
Rollover and layer swapping techniques are powerful techniques in DHTML.
They can make any website as interesting and provides multimedia components.
By combining the techniques rollover and layer swapping, we can get simple, fast
and efective menus in our WebPages.
Rollover technique is used to change the appearance of menu options. This is
possible by using two events onMouseOver, onMouseOut.
When the event onClick is occurred, the JavaScript uses layer swapping to display
the corresponding menu option content.
Layer swapping technique is also useful when we want to create submenus.
When we select a main menu option, the corresponding submenu layer is visible
and the remaining layers are hidden.
Submenus are identical to the main menus. Each submenu is formatted with
number of rollover buttons and place them in a separate layer.
Example Program
<html>
<head>
<title>Text only Menu System</title>
<script language="JavaScript">
var f=0;
function show(k)
{
if(f==0)
{
document.getElementById(k).style.visibility="visible";
f=1;
}
else
{
document.getElementById(k).style.visibility="hidden";
f=0;
}
Department of Computer Science
Page 9 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
}
</script>
</head>
<body>
<a href="#" onClick="show('f')"> File </a>
<div id="f" style="position:absolute;visibility:hidden;top=32;left:8;">
<a id="n" href="#"> New </a> <br>
<a id="o" href="#"> Open </a> <br>
<a is="s" href="#"> Save </a> <br>
</div>
</body>
</html>
9) Multiple pages in a single download.
DHTML has many advantages like opening and saving in a single browser screen instead
of using separate browser window. This is possible using layers in DHTML. Layers are defned by
using <div> tag.
To open multiple pages in a single window, place each page of content in a separate
layer and switch between those layers.
This is useful when most of the data is text based and the users are going to see all
of that information.
It will also work as a way of splitting a single large document into several screens of
data. So that users dont have to scroll up and down.
This technique will not work if the layers have too much content or too many
images.
It will also not work if visitors would like to see all of the pages at a time.
In the following program, the layer names are formed as con and a layer number: con1,
con2, con3. The explorer objects are referenced by passing the elements ID to a function
getElementById( ). Once the elements are referenced , then the visibility can set. Explorer uses
the values visible and hidden.
Document.getElementById(con+now).style.visibility=visible;
Example Program
<html>
<head>
<title>Multiple pages in a single download </title>
<script language=JavaScript>
var active=1;
function change(now)
{
document.getElementById(con+active).style.visibility=hidden;
document.getElementById(con+active).style.visibility=hidden;
active=now;
}
</script>
</head>
<body>
<div id=menu style=position:absolute;top:5;left:5>
<a href=# onClick=change(1)>One</a> <br>
<a href=# onClick=change(2)>Twoe</a> <br>
Department of Computer Science
Page 10 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
<a href=# onClick=change(3)>Three</a> <br>
</div>
<div id=con1 style=position:absolute;top:5;left:200;>
-
Content One
-
</div>
<div id=con2 style=position:absolute;top:5;left:200;>
-
Content Two
-
</div>
<div id=con3 style=position:absolute;top:5;left:200;>
-
Content Three
-
</div>
</body>
</html>
10) Floating Logos
The complex development of JavaScript is foating logos.
A logo is an image or text that describes company or organization.
Floating logos are logos in webpages which displays an image in bottom right hand
corner of the screen.
When the user resizes the browser or scrolls the browser, the logo remains in the
same corner.
If we use this technique be ware of that foating logo will always be on top of the
webpage content.
If the logo is too big then it will hide the webpage content. If the logo is more
attractive then it attracts attention away from the webpage content.
For this reasons the web developer should use small transparent images as
foating logos.
Floating logos display either text or image that contains company name or brand
seal of the company.
The position of the foating logo is changed according to the size and position of the
browser window.
body.scrollTop Returns vertical scrolling position
body.scrollLeft Returns horizontal scrolling position
body.clientHeight Returns current browser canvas height
body.clientWidth Returns current browser canvas width
onScroll This event will be activated when the page is
scrolled
onResize This event will be activated when the page is
resized
onLoad This event will be activated when the page is
loaded.
Department of Computer Science
Page 11 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
Example Program:
<html>
<head>
<style>
div
{
flter:alpha(opacity=30);
}
</style>
<script language="JavaScript">
function fogo()
{
Var t,l;
t= document.body.scrollTop+document.body.clientHeight-150;
l= document.body.scrollLeft+document.body.clientWidth-180;
document.getElementById(logo).style.top = t;
document.getElementById(logo).style.left = l;
}
</script>
</head>
<body onScroll="fogo()" onResize="fogo()">
<div id="logo" style="position:absolute;z-index:2;top:375;left:350">
<img src=sunset.jpg width=100 height=100>
</div>
Webpage Content Here
</body>
</html>
Department of Computer Science
Page 12 of 33
loating !ogo
"e#page content
Here
III B.Sc Computer Science St.Marys Degree & P.G College
UNIT IV
USEFUL SOFTWARE
1) Web browsers
Web browser is an interface between user and Internet. A web browser is a software
application for retrieving, presenting and traversing information resources on the WWW. An
information resource is identifed by a Uniform Resource Identifer(URI). The web browser
interprets the code and display the result on the screen. There are two types of web browsers are
available. They are
i) Text only web browsers.
ii) Graphical based web browsers.
Text only web browsers:- Text only web browsers displays only text on the screen. There are no
graphics are available. Example for text only web browser is Lynx.
Graphical based web browsers:- Graphical based web browsers are very popular because here
we can view and implement multimedia efects.
Mosaic: It was the frst graphical based web browser developed by Mark Anderson in 1993. It
was also a client for earlier protocols such as FTP, Gopher, etc.
Netscape Navigator: The browser Netscape Navigator was developed by Netscape
Communications Corporation in 1994. The updated version of Netscape navigator supports the
Scripting languages.
Internet Explorer: Internet Explorer was released by Microsoft Inc in 1995. Internet Explorer is
very popular web browser in now a days, because it can open any webpage with multimedia
objects very quickly.
Apart from the above, the following webbrowsers are also available.
1)HotJava
2)Mozilla Firefox
3)Opera
Choosing a web browser : when we choose a web browser, we need to think about the following
points.
Does the browser run on our Operating System?
Does the browser support the uses of Cascading Style Sheets?
Does the browser support java Applets?
Does the browser support JavaScript? If so, which version?
Does the browser support the use of plug-ins for most popular web data types? (Audio,
video, MIDI, MPEG)
How much hard disk space will be the installed browser needs?
How much memory will the browser need?
Using web browser during development work:
Many web authors believe that they have to put their pages on a web server and access
over the internet. If a fle is opened by the browser directly from the local hard disk, the browser
is able to format and display its contents. We can not access CGIScripts in this way. To open fles
in our browser click on Open option in the fle menu to search for the fle.
Department of Computer Science
Page 13 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
2) Web Server
A webserver is a computer that contains all the webpages for a particular web site. It has
a special software installed to send these webpages requested by the web browser. There are 3
types of web servers are available.
i) Personal Web Server (PWS).
ii) Apache Tom cat.
iii) Internet Information Sevices (IIS)
Personal Web Server: Personal Web Server was introduced by Microsoft incorporation. This web
server is available for Windows95/98/NT. Personal web server is software that is designed to
create and to manage a web server on a desktop computer.
It is used to learn how to setup and maintain a website.
It can also serve as a testing for a website.
Web programmers can test their programs and web pages with the help of personal web
server.
Personal web server supports more server side programming approaches.
Apache tomcat Server: Apache tomcat server was designed by Sun Microsystems. It is
available on UNIX, Windows Operating Systems.
Apache tomcat server is a servlet container. It is used to implement Java Servlet and Java
Server Pages technologies. The Java Servlets and Java Server Pages are introduced by Sun Micro
Systems. This web server is used over 50% of web providers.
Internet Information Services :
It is developed by Microsoft Incorporation.
It use http (Hypertext Transfer Protocol) to deliver world wide web documents.
IIS incorporate various functions for security.
It also provides CGI, Gopher, and FTP.
It is used to create, manage and securing website.
IIS services integrated with Operating Systems.
Web server architecture:
Request
Response
3) Accessing Your ISP ( Internet Server Provider)
Department of Computer Science
Page 14 of 33
"e# #ro$%er "e# #ro$%er
"e# %er&er
'IIS(
apac)e*
Data#a%e
oracle(
+,
S-!
III B.Sc Computer Science St.Marys Degree & P.G College
ISP stands for Internet Server Provider. An ISP is a company that provides internet access
for customers. An ISP provides a telephone number, username, password and other connection
information. So users can connect their computers to ISP computer. An ISP charges monthly or
yearly basis.
Major ISPs in India:
i) BSNL
ii) Airtel
iii) Reliance
iv) Satyam info way
Software: When we signup with an ISP they may provide a software to manage our site.
Basically we need two things. They are i) An FTP program and ii) A Telnet program
FTP:
FTP stands for File Transfer Protocol.
It is an application protocol used for exchanging fles between computers over the internet.
It is the simplest and most commonly used method to download and upload fles.
The URL of fles on FTP begins with ftp://path.
Anonymous FTP:
Many servers support an anonymous FTP. This service allows any one to log-on to the
machine and access the fles there. This service is usually confgured so that only restricted
subsets of fles are available for download. These fles are kept under /pub hierarchy.
To use anonymous FTP, users must log-on to the remote server as a default user name
anonymous and the password is e-mail address.
Telnet:
Telnet is a way of opening a shell on a remote machine.
Telnet is a program that allows us to log-in to remote computer.
By using telnet we can access fles, create directory structures, change permissions etc.
Telnet is also called as remote login.
To connect to the server, simply type the following.
Syntax : telnet server_address
Examle : telnet 192.168.1.1
4) Protocols
A protocol is a set of rules which controls how computers can communicate. The protocol
dictates the following.
The way that addresses are assigned to machines.
The format in which they will pass data.
The amount of data that can be sent in one go.
Syntax, semantics and timing are the key elements of the protocols. Syntax includes data
format on signal levels. Semantics includes control information for coordination and error
handling. Timing includes speed matching and sequencing.
The entire internet is underpinned by just 2 protocols. They are Internet Protocol and
Transmission Control Protocols. The World Wide Web adds other protocols. They are hypertext
transfer protocol and the common gateway interface.
IP and TCP:- internet runs depend on two protocols. They are IP and TCP. They provide all the
requirements to transmit and receive data across complex WANs. Networks are made of layers.
Each layer provides a diferent type of functionality.
Department of Computer Science
Page 15 of 33
.pplication !a,er ' )ttp
*
/ran%port !a,er ' /CP *
Internet !a,er ' IP *
P),%ical !a,er ' ca#le *
.pplication !a,er ' )ttp
*
/ran%port !a,er ' /CP *
Internet !a,er ' IP *
III B.Sc Computer Science St.Marys Degree & P.G College
The application layer represents the application which we are running.
Transport layer is used to establish connection between source computer to destination
computer.
Internet layer is used to avoid congestion (over crowed) of the trafc and deliver the IP
packets successfully.
The physical layer is made from the hardware (cables, network, interface cards etc.)
On the internet the data is transferred as a series of packets.
Internet Protocol :
In the Internet layer of a sending machine, the data is splited into packets.
Each packet contains the address of the sender and receiver followed by packet number.
IP packets have 20 to 60 bits of header information.
IP packets have 65515 bytes of data.
IP has limited functionality. The protocol gives no guaranty of delivery. Large message over
65515 bytes must be sent on diferent routes. They can arrive in a diferent order from that in
which they were sent. Further functionality is needed to provide sequencing and guaranty
delivery. These functions are supplied by Transmission Control Protocol.
IP Version (4 bits) Head length (4 bits) Service type (8 bits) Message length(16 bits)
Fragment ID (16 bits) Fragment Control (16 bits)
Time to live (8 bits) Protocol (8 bits) Header Check Sum (16 bits)
Source Address ( 32 bits)
Destination Address (32 bits)
Options Padding (32 bits)
Message Data
Transmission Control Protocol :
It is a reliable connection oriented protocol.
When a host receives the data packet, the IP code removes the IP header and passes the
packet onto TCP code.
If only one packet was sent, the TCP headers are removed and the packet is passed onto
the application.
If several packets were sent, TCP store them until the whole data set is stored.
When each packet is received, TCP sends an acknowledgement to sender.
If an acknowledgement is not received for a specifc packet then it send that packet once
again.
Each TCP segment contains sources and destination port number to identify the sending
and receiving application.
The host must strip the headers from the packets and reassemble the original message.
Department of Computer Science
Page 16 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
Source Port Number (16 bits) Destination Port number (16 bits)
Sequence Number (32 bits)
Acknowledge Number (32 bits)
Data Ofset
(16 bits)
Window Size
(16 bits)
TCP Check Sum
(16 bits)
Urgent pointer
(16 bits)
Options Padding (32 bits)
User Data
Internet Addresses:
The Internet Protocol gives each machine a unique 4 bit numerical address.
These addresses are usually written in the form 192.168.1.2.3
Each 4 bits should be in the range 0 to 255.
Server runs a number of internet connected applications at the same time.
Each application is assigned a port number.
The port number for http is 80, FTP is 20 and 21 to receive command.
When we enter a text format address, DNS server converts it into numerical form before
the packets were sent.
5) Hypertext Transfer Protocol
This protocol is used to transfer information on the world wide web. Web servers and
clients can communicate each other via http.
HTTP sessions: under HTTP, there are 4 steps to communicate across the web.
Make the connection
Request the document
Respond to a request
Close the connection
Connection setup: The browser opens a standard TCP connection to the server. By default port
80 is used. When ports other than 80 are used, the port number is added to the URL.
Example : www.example.com:8080
Browser Request: Once the TCP connection is established, that requests a given document
using its URL. The most common http request types are get and post.
Get method: The get method tells the server that the browser is attempting to retrieve a
document. Common uses of get request are to retrieve a HTML document or an image
or to fetch result.
Post method: The post method sends data to a server. Common uses of post request are to send
information to a server such as authentication information. The post method sends
data on http message.
Server Response: The httpd(web server) process can automatically insert information into the
header of response. Often this is MIME type of the document which is based on the fle type.
Example : 200 OK
404 Not Found
Closing the Connection :- The client and server can both close the connection. This uses TCP
approach. If another document is required a connection, it must be open.
HTTP server response codes:- web server sends diferent codes to the browser. Some of these
displayed by the browser. The codes are grouped logically in the ranges.
200.299 Indicating successful request
Department of Computer Science
Page 17 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
300-399 Indicating that a page may have moved
400-499 Showing client errors
500-599 Showing server errors
Response Code Meaning
200 Ok It indicates that the message contain the requested data
including all necessary headers
201 created The server has created a fle which the browser attempt to load.
This code is used as reply to post request
204 no content The request was processed successfully but there is no data to
return to the browser.
301 moved permanently The page have moved to a new URL
400 bad request The request from the client used invalid syntax.
401 unauthorized This is the common error response. some form of authorization
is needed before the page is accessed.
404 not found It indicates that the request is valid; the server could not fnd
the document.
500 Internal server error The server generated an error which it can not handle
501 Not implemented The server is unable to process the request due to some
unimplemented failure.
503 Service Unavailable The server is temporarily unable to handle the request.
6) What is Common Gateway Interface? Explain in detail.
Common Gateway Interface is defned as the interface between web browser and web
server. When the browser submits data to the server, the server is unable to fully process that
data. The data must be passed to an application for processing. In processing, html page may be
generated and returned to the browser.
CGI applications can be written in the language such as C, C++, VB, Perl ect. CGIScripts
are most powerful and useful in processing the HTML forms submitted by the users at client
side. The following diagram shows how the html form is processed by CGI Scripts.
Department of Computer Science
Page 18 of 33
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000
Data#a%e
S-!
1uer,
2e%ult
.pplication orm
3ame
.ge
Su#mit
Client "e# %er&er
ille4 orm
2e%ult
C5I Script
III B.Sc Computer Science St.Marys Degree & P.G College
In the above diagram when the user submit a form to the web server, the web server
executes the CGI Script. The CGI Script takes the form as input and verifes all the values
entered in the form. If there are no mistakes then the CGI Script generate SQL queries and
inserts the values on the form into database. If there are any mistakes in the form such as
wrong data, blank felds, then the CGI Script notify that mistakes to the server.
CGI Scripts are also used for searching the data base for the information requested by the
user. Another use of CGI Scripts is that to perform calculations such as counting the total
number of visitors for a particular page.
Dangers of using CGI :
The main problem with CGI Script is that it provides low security.
Any body can access the CGI Scripts.
Scripts may present information about the host system to the hackers.
Environment Variables: Environment variables can be accessed and used by CGI Script. Some
of the environment variables are
Environment
Variable
Uses
SERVER_PROTOCOL Name and revision of the protocol used to send the request
REQUEST_METHOD For HTTP requests valid methods are HEAD, GET, and POST
PATH_INFO Clients can append path information onto a URL. The server will
decode this information before passing parameters to the CGI Script
QUERY_STRING Information following ? in the URL not decoded by the server.
SCRIPT_NAME Logical path to the Current Script
REMOTE_ADDR IP address of the requesting host.
CONTENT_LENGTH Length of the content data in bytes.
7) Document Object Model
Dynamic web pages are a combination of 3 things.
Formatted page content.
Executable script embedded with in the page.
An interface which leads scripts to operate on the elements with in the document.
HTML is used to format the content and JavaScript is use to manipulate the content.
These scripts are able to access the element which makeup the document. Scripts uses an
Application Programming Interface (API) which is provided by the web browser itself.
The DOM is an API for html and XML documents. It provides a mechanism to manipulate
those elements by programming scripts. By using DOM, developers can perform the following
tasks.
Create document
Manipulate their structure.
Modify, delete or add elements with in the documents.
Implementing the Document Object Model :
The DOM of HTML document is a hierarchical structure represented as a tree. This
structure does not implies those the DOM software must manipulate the document in a
Department of Computer Science
Page 19 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
hierarchical manner. It is just a representation. The relationship between HTML code and the
DOM is shown below.
<html>
<head>
<title> Our College </title>
</head>
<body>
<p> B.Sc </p>
<ul> <li>M.S.Cs</li>
<li>M.P.Cs</li>
</ul>
</body>
</html>
The use of DOM is that any two implementations of the same document will arrive at the same
structure. The sets of objects and relationships between those objects will be compatible. The
DOM models but not implements the following.
The object that comprises the documents.
Semantics, behaviour and attributes of those objects.
The relationship between those objects.
The browser provides a series of objects.
The browser window that the page is displayed is known as window object.
The html page displayed by the browser is known as document object.
Window.document.forms[0] refers to the frst form in the document.
Window.document.forms[0].elements[0].value refers to the value of the frst element
on the frst form.
Department of Computer Science
Page 20 of 33
H/+!
H6.D 78D9
/I/!6
P.2.52
.PH
!IS/
I/6+ I/6+
8ur
College
7:S
c
+:S:
C%
+:P:
C%
"in4o$
8#;ect
Self( parent( top(
&ariou% $in4o$
o#;ect%
Document
Document o#;ect
3a&igator
7ro$%er o#;ect
rame% < =
.rra, of $in4o$
o#;ect
Hi%tor,
Hi%tor, 8#;ect
orm% < =
.nc)or%
< =
!in>% < =
Image% <
=
.pplet% <
=
6m#e4%
< =
element% <
=
te?t(
pa%%$or4
ra4io
#uuton
c)ec>#o?
%u#mit
re%et
te?tarea
III B.Sc Computer Science St.Marys Degree & P.G College
UNIT-V
ELECTRONIC COMMERCE
Q) What is E-Commerce? What are the advantages and disadvantages of E-Commerce?
E Commerce refers to marketing, selling and business over the internet. E-commerce
can be defned as business activities conducted using Electronic Data Transmission via the
internet and WWW. It combines a range of processes such as Electronic Data Interchange (EDI),
E-mail, WWW & Internet applications.
E-commerce provides a way to exchange information between individuals, companies,
countries. E-commerce has been broken-up into two main sectors. They are
i) Business to Business [B2B]
ii) Business to Consumer [B2C]
Advantages Of E-Commerce:
The following are key strengths of using the Internet for businesses:
1) 24x7 Operation: The Internet operations are performed round the clock i.e., 24 hours a
day and 7 days a week.
2) Global Reach: As Internet is a global network, reaching global customers is relatively
easy on the net compared to the other methods.
3) Cost of acquiring, serving and relating customers: It is relatively cheaper to get new
customers over the Internet, because of its 24x7 operation and global reach. Using new
tools, it is possible to retain customers loyalty with minimum investment.
4) An extended enterprise is easy to build: Now-a-days every enterprise is a part of the
connected economy. Internet provides an efective (less expensive) way to extend an
enterprise. Tools like Enterprise Resource Planning (ERP), Supply Chain Management (SCM),
and Customer Relationship Management (CRM) can easily be developed over the net.
5) Disintermediatories: Using the net, one can directly approach the customers and
suppliers. This process decreases the number of levels and also cost.
6) Improved customer service: It results in higher satisfaction and more sales.
7) Better payment System : E-commerce allows encrypted and secure payment facility in
online
8) Power to provide the best of the worlds: It improves the traditional business along
with Internet tools.
Disadvantages of E-Commerce:
Department of Computer Science
Page 21 of 33
III B.Sc Computer Science St.Marys Degree & P.G College
1)Some business processes may never turn to the E-Commerce. For Example, perishable foods
and high cost items (Jewellery, Antiques etc.) may be impossible to inspect completely from
the remote location.
2) Businesses often calculate the return-on-investment before using the new technology. This
has been difcult to do with E-Commerce i.e. the costs and benefts are very hard to
estimate using E-Commerce
3) It is very difcult to maintain hardware and software for traditional business databases and
transaction processing.
4) Many businesses face cultural and legal problems in conducting E-Commerce. The legal
environment in which e-commerce is conducted is full of unclear and conficting laws.
5) Some customers are still fearful of sending their credit card numbers over the Internet
because of the low level security.
Q) Explain diferent types of E-Commerce?
Types of E-Commerce (Business MODELS FOR E-COMMERCE):
A business model is the method of doing business by which a company can earn profts.
E-Commerce can be defned as any form of business transaction in which the parties interact
electronically. It could involve several trading steps, such as marketing, ordering, payment and
support for delivery. Electronic markets have three main functions such as:
Matching buyers and sellers