Web App-1
Web App-1
Wide Web
1. The Internet
1.1 History and Evolution
⚫ INTERNET– an interconnected network of networks that
link computer to computer using protocol.
⚫ It was called ARPANET in 1969 as a research network by
Advanced Research Projects Agency (ARPA) of the US
Defence Department.
⚫ ARPANET development resulted from a collaboration
among universities, industry, and government.
1. The Internet
⚫ World Wide Web (WWW) started in 1989 at the European
Particle Physics Laboratory (CERN) by Tim Berners-Lee.
⚫ It is a network of computers that serve web pages that
distributed hypermedia information system on the Internet.
⚫ Information can be organize, link, and access via
client-server protocol.
2. The World Wide Web
2.1 Web Standard
⚫ World Wide Web(WWW) is a part of the Internet
that consists of Internet connected computers called
Web Servers that store electronic documents called
Web Pages.
⚫ Web Page is a specially formatted document that can
contain images, text, interactive elements, and
hyperlinks, which links to other pages.
⚫ Web Site is a group of related Web Pages.
⚫ A web site’s primary page known as Home Page,
typically introduces the web site and provide
information about the site’s purpose and content.
2. The World Wide Web – Cont.
⚫ A hyperlink, or simply known as link, is a word,
phrase or image that connects web pages.
http://www.ipoh.com/news
3.Ways to Access the Internet and the
web – Cont.
⚫ An IP address is the numeric address for computer
connected to the Internet.
⚫ Every device in a computer network has an IP address.
⚫ A domain name is the text version of a computer’s
numeric IP address.
3.Ways to Access the Internet and the
web – Cont.
⚫ Different between IP Address and Domain Names
.my Malaysia
.sg Singapore
.jp Japan
.us United State
.de German
.fr France
.au Australia
4. Types of Web Sites – Cont.
⚫ In URL, the domain name and top-level domain
designation are preceded by a protocol.
⚫ For Web pages, that protocol is the Hypertext
Transfer Protocol (HTTP), which is the
communications standard for transmitting Web pages
over the Internet.
⚫ Most Web browsers will insert the HTTP protocol
automatically as the requested Web page is
downloaded into the browser.
3.Ways to Access the Internet and the
web – Cont.
3.4 Alternative Web Page Viewing Devices
⚫ In the past, the most common way to view Web pages is
using desktop or laptop.
⚫ Today, you also can view Web pages using handheld
computer.
⚫ Handheld computers are wireless, portable computer
designed to fit in a user’s hand.
⚫ A personal digital assistant (PDA) is a type of handheld
computer used to manage personal information and access
the Internet. Today, most PDAs are Smartphone's.
⚫ Smartphone is a mobile phone that offers other features,
such as a camera, calendar, and Internet access for e-mail,
music downloads and access to Web pages in addition to
cellular voice telephone service.
3.Ways to Access the Internet and the
web – Cont.
4. Types of Web Sites
⚫ Web can be categorizes as personal, organizational and
commercial.
⚫ A Web site’s type differs from a Web site’s purpose.
4. Types of Web Sites – Cont.
4.1 Personal Web Sites
⚫ Individual create their own personal Web sites for a
range of communication purpose.
⚫ You might use personal Web site to promote your
employment credentials, share news and photos with
friends and family, or share a common interest or
hobby with fellow enthusiasts.
4. Types of Web Sites – Cont.
4. Types of Web Sites – Cont.
4. Types of Web Sites – Cont.
4. Types of Web Sites – Cont.
4.2 Organizational Web Sites
⚫ An organizational Web site is one that owned by any
type of group, association, or organization, whether it
is professional or amateur group.
⚫ For example, if you belong to the Advertisement
Photographers Association of North Malaysia, you
might volunteer to create and organizational Web site
to promote member accomplishments or to encourage
support and participation.
4. Types of Web Sites – Cont.
4. Types of Web Sites – Cont.
4. Types of Web Sites – Cont.
4.3 Commercial Web Sites
⚫ The goal of many commercial websites is to promote
and sell products or services of a business, from the
smallest home-based business to the largest
international enterprise.
⚫ The design and content of a large enterprise’s Web site
might be much more sophisticated and complex than
that of a small business's Web site.
4. Types of Web Sites – Cont.
⚫ Sample of large enterprise Web site
4. Types of Web Sites – Cont.
⚫ Sample of small business Web site
5. Other Internet Services
5.1 E-mail
⚫ Short for electronic mail.
⚫ E-mail is a message that may contain text, images, files
or other attachments sent through a network to a
specified individual or group of individuals.
⚫ The first e-mail was sent by Ray Tomlinson in 1971.
5. Other Internet Services
5.2 Mailing List
⚫ A mailing list is a collection of names and addresses
used by an individual or an organization to send
material to multiple recipients.
⚫ An electronic mailing list might have several hundred
'other' people receiving the same piece of e-mail you
do, there could be thousands of other people.
⚫ In a real sense a mailing list takes one e-mail message
that is sent to it and does a mass-mailing to everyone
that has 'subscribed' to the list. To remove your name,
you unsubscribe from the mailing list.
5. Other Internet Services
5.3 Instant Messaging
⚫ Instant messaging(IM) is a type of communications
service that enables you to create a kind of private chat
room with another individual in order to communicate
in real time over the Internet.
⚫ It notifies you when one or more people online and
then allows you to exchange messages of files.
⚫ Example: Yahoo Messenger, IRC or MSN instant
messenger.
5. Other Internet Services
5.4 Chat Rooms
⚫ A designated area or forum on the World Wide
Web that allows users to communicate with each other
through instant messaging.
⚫ Text is instantly displayed in the chat rooms
conversation log after a user hits enter or send.
⚫ Other users included in the chat session are able to see
what another user types.
5. Other Internet Services
5.5 VoIP
⚫ VoIP stands for Voice over Internet Protocol.
⚫ Sometimes it's referred to as Voice over
Networks(VoN) or Voice over Broadband(VoB) and
sometimes Internet Telephony.
⚫ VoIP allows you to make free, or very low cost,
telephone calls over the Internet.
⚫ You can call any telephone in the world and any
telephone can call you - regardless of what equipment
or network the person you are calling uses.
5. Other Internet Services
5.6 Newsgroup
⚫ Newsgroups are Internet discussion forums where groups
of users with common interests gather to talk about
everything from software to comic books to politics.
⚫ Unlike e‑mail messages, which are visible only to the
sender and specified recipients, newsgroup messages can
be read by anyone who views the group that they're posted
in.
⚫ Newsgroups are international in scope, with participants
from all corners of the Internet.
⚫ Before you can view messages in a newsgroup, you'll need
a newsreader program, such as Windows Mail.
⚫ You'll use the newsreader to download messages from a
news server.
5. Other Internet Services
5.7 FTP
⚫ Short for File Transfer Protocol, the protocol for
exchanging files over the Internet.
⚫ FTP works in the same way as HTTP for transferring
Web pages from a server to a user's browser and
SMTP for transferring electronic mail across the
Internet in that, like these technologies, FTP uses the
Internet's TCP/IP protocols to enable data transfer.
⚫ FTP is most commonly used to download a file from a
server using the Internet or to upload a file to a server
(e.g., uploading a Web page file to a server).
A Brief Introduction to the Internet
What the Internet Is
⚫ A world-wide network of computer networks.
⚫ At the lowest level, since 1982, all connections use TCP/IP.
⚫ TCP/IP hides the differences among devices connected to
the Internet.
⚫ Internet is actually a network of networks rather than a
network of computers.
A Brief Introduction to the Internet
IP Address
⚫ Every node has a unique numeric address.
⚫ Form: 32-bit binary number.
⚫ Usually written as four 8-bit numbers, separated by periods.
⚫ Example: 191.57.126.0
54
Internet Protocol (IP)
⚫ IP is the fundamental protocol defining the Internet (as
the name implies!)
⚫ IP address:
⚫ 32-bit number (in IPv4)
⚫ Associated with at most one device at a time (although
device may have more than one)
⚫ Written as four dot-separated bytes, e.g. 192.0.34.166
55
IP
⚫ IP function: transfer data from source device to
destination device
⚫ IP source software creates a packet representing
the data
⚫ Header: source and destination IP addresses, length of
data, etc.
⚫ Data itself
⚫ If destination is on another LAN, packet is sent to
a gateway that connects to more than one network
56
IP
Source
Network 1
Gateway Destinatio
n
Gateway
Network 2 Network 3
57
Transmission Control Protocol
(TCP)
⚫ Limitations of IP:
⚫ No guarantee of packet delivery (packets can be dropped)
⚫ Communication is one-way (source to destination)
⚫ TCP adds concept of a connection on top of IP
⚫ Provides guarantee that packets delivered
⚫ Provide two-way (full duplex) communication
58
TCP
Establish
connection. { Can I talk to you?
OK.
Here’s a packet.
Send packet
with
acknowledgment. { Source
Got it.
Destination
Here’s a packet.
{
Resend packet if
no (or delayed) Here’s a resent packet.
acknowledgment.
Got it.
59
TCP
⚫ TCP also adds concept of a port
⚫ TCP header contains port number representing an
application program on the destination computer
⚫ Some port numbers have standard meanings
⚫ Example: port 25 is normally used for email transmitted using the
Simple Mail Transfer Protocol (SMTP)
⚫ Other port numbers are available first-come-first served
to any application
60
User Datagram Protocol (UDP)
⚫ Like TCP in that:
⚫ Builds on IP
⚫ Provides port concept
⚫ Unlike TCP in that:
⚫ No connection concept
⚫ No transmission guarantee
⚫ Advantage of UDP vs. TCP:
⚫ Lightweight, so faster for one-time messages
61
Domain Name Service (DNS)
62
DNS
63
DNS
⚫ nslookup program provides command-line access to
DNS (on most systems)
⚫ looking up a host name given an IP address is known
as a reverse lookup
⚫ Recall that single host may have multiple IP addresses.
⚫ Address returned is the canonical IP address specified in
the DNS system.
64
DNS
⚫ ipconfig (on windows) can be used to find the IP
address (addresses) of your machine
⚫ ipconfig /displaydns displays the contents of the DNS
Resolver Cache (ipconfig /flushdns to flush it)
65
Higher-level Protocols
66
World Wide Web
⚫ Originally, one of several systems for organizing
Internet-based information
⚫ Competitors: WAIS, Gopher, ARCHIE
⚫ Distinctive feature of Web: support for hypertext (text
containing links)
⚫ Communication via Hypertext Transport Protocol
(HTTP)
⚫ Document representation using Hypertext Markup
Language (HTML)
67
World Wide Web
⚫ The Web is the collection of machines (Web servers)
on the Internet that provide information, particularly
HTML documents, via HTTP.
⚫ Machines that access information on the Web are
known as Web clients. A Web browser is software
used by an end user to access the Web.
68
Hypertext Transport Protocol
(HTTP)
⚫ HTTP is based on the request-response communication
model:
⚫ Client sends a request
⚫ Server sends a response
⚫ HTTP is a stateless protocol:
⚫ The protocol does not require the server to remember
anything about the client between requests.
69
HTTP
⚫ Normally implemented over a TCP connection (80
is standard port number for HTTP)
⚫ Typical browser-server interaction:
⚫ User enters Web address in browser
⚫ Browser uses DNS to locate IP address
⚫ Browser opens TCP connection to server
⚫ Browser sends HTTP request over connection
⚫ Server sends HTTP response to browser over connection
⚫ Browser displays body of response in the client area of
the browser window
70
HTTP
⚫ The information transmitted using HTTP is often
entirely text
⚫ Can use the Internet’s Telnet protocol to simulate
browser request and view server response
71
HTTP
72
HTTP Request
⚫ Structure of the request:
⚫ start line
⚫ header field(s)
⚫ blank line
⚫ optional body
73
HTTP Request
⚫ Structure of the request:
⚫ start line
⚫ header field(s)
⚫ blank line
⚫ optional body
74
HTTP Request
⚫ Start line
⚫ Example: GET / HTTP/1.1
⚫ Three space-separated parts:
⚫ HTTP request method
⚫ Request-URI (Uniform Resource Identifier)
⚫ HTTP version
75
HTTP Request
⚫ Start line
⚫ Example: GET / HTTP/1.1
⚫ Three space-separated parts:
⚫ HTTP request method
⚫ Request-URI
⚫ HTTP version
⚫ We will cover 1.1, in which version part of start line must be
exactly as shown
76
HTTP Request
⚫ Start line
⚫ Example: GET / HTTP/1.1
⚫ Three space-separated parts:
⚫ HTTP request method
⚫ Request-URI
⚫ HTTP version
77
HTTP Request
⚫ Uniform Resource Identifier (URI)
⚫ Syntax: scheme : scheme-depend-part
⚫ Ex: In http://www.example.com/
the scheme is http
⚫ Request-URI is the portion of the requested URI that
follows the host name (which is supplied by the required
Host header field)
⚫ Ex: / is Request-URI portion of http://www.example.com/
78
URI
⚫ URI’s are of two types:
⚫ Uniform Resource Name (URN)
⚫ Can be used to identify resources with unique names, such as
books (which have unique ISBN’s)
⚫ Scheme is urn
⚫ Uniform Resource Locator (URL)
⚫ Specifies location at which a resource can be found
⚫ In addition to http, some other URL schemes are https, ftp, mailto,
and file
79
HTTP Request
⚫ Start line
⚫ Example: GET / HTTP/1.1
⚫ Three space-separated parts:
⚫ HTTP request method
⚫ Request-URI
⚫ HTTP version
80
Multipurpose Internet Mail Extensions
(MIME)
⚫ Convention for specifying content type of a message
⚫ In HTTP, typically used to specify content type of the
body of the response
⚫ MIME content type syntax:
⚫ top-level type / subtype
⚫ Examples: text/html, image/jpeg
81
Web Servers
⚫ Basic functionality:
⚫ Receive HTTP request via TCP
⚫ Map Host header to specific virtual host (one of many
host names sharing an IP address)
⚫ Map Request-URI to specific resource associated with
the virtual host
⚫ File: Return file in HTTP response
⚫ Program: Run program and return output in HTTP response
⚫ Map type of resource to appropriate MIME type and use
to set Content-Type header in HTTP response
⚫ Log information about the request and response
82
Web Servers
⚫ httpd: UIUC, primary Web server c. 1995
⚫ Apache: “A patchy” version of httpd, now the most
popular server (esp. on Linux platforms)
⚫ IIS: Microsoft Internet Information Server
⚫ Tomcat:
⚫ Java-based
⚫ Provides container (Catalina) for running Java servlets
(HTML-generating programs) as back-end to Apache or
IIS
⚫ Can run stand-alone using Coyote HTTP front-end
83
Web Servers
⚫ Some Coyote communication parameters:
⚫ Allowed/blocked IP addresses
⚫ Max. simultaneous active TCP connections
⚫ Max. queued TCP connection requests
⚫ “Keep-alive” time for inactive TCP connections
⚫ Modify parameters to tune server performance
84
Web Servers
⚫ Some Catalina container parameters:
⚫ Virtual host names and associated ports
⚫ Logging preferences
⚫ Mapping from Request-URI’s to server resources
⚫ Password protection of resources
⚫ Use of server-side caching
85
Tomcat Web Server
⚫ HTML-based server administration
⚫ Browse to
http://localhost:8080
and click on Server Administration link
⚫ localhost is a special host name that means “this
machine”
86
Tomcat Web Server
87
Tomcat Web Server
88
Tomcat Web Server
89
Tomcat Web Server
⚫ Some Connector fields:
⚫ Port Number: port “owned” by this connector
⚫ Max Threads: max connections processed simultaneously
⚫ Connection Timeout: keep-alive time
90
Tomcat Web Server
91
Tools and Web Programming Languages
HTML
⚫ To describe the general form and layout of documents.
⚫ An HTML document is a mix of content and controls.
⚫ Controls are tags and their attributes.
Tools and Web Programming Languages
⚫ Tags often delimit content and specify
something about how the content should be arranged in
the document.
⚫ Attributes provide additional information about the
content of a tag.
Tools and Web Programming Languages
XML
⚫ A meta-markup language.
⚫ Used to create a new markup language for a particular
purpose or area.
⚫ Because the tags are designed for a specific area, they can
be meaningful.
⚫ No presentation details.
⚫ A simple and universal way of representing data of any
textual kind.
Tools and Web Programming Languages
JavaScript
⚫ A client-side HTML-embedded scripting language.
⚫ Only related to Java through syntax.
⚫ Dynamically typed and not object-oriented.
⚫ Provides a way to access elements of HTML documents
and dynamically change them.
Tools and Web Programming Languages
Java
⚫ General purpose object-oriented programming language.
⚫ Based on C++, but simpler and safer.
⚫ Focus is on applets and servlets.
Tools and Web Programming Languages
⚫ Perl is highly platform independent, and has been ported to
all common platforms.
⚫ Perl is not just for CGI.
Tools and Web Programming Languages
PHP
⚫ A server-side scripting language.
⚫ An alternative to CGI.
⚫ Similar to JavaScript.
⚫ Great for form processing and database access through the
Web.
Tools and Web Programming Languages
Tools for Creating Web Page
⚫ Adobe Dreamweaver (Latest version CS5)
⚫ Microsoft Front Page
⚫ Adobe PageMill