eb
Technologies-
I
Uttam K. Roy
Dept. of Information Technology,
Jadavpur University, Kolkata
u_roy@[Link]
© 2
© 3
Infant
© 4
Kid
© 5
Kid
© 6
Kids
© 7
Teenagers
© 8
Professional
© 9
Aged
© 10
Range of users(0-100)
© 11
U s e r s (in b illio n )
0
1
2
3
©
Year
WWW 1990-2015
12
Users in India
USA
CHINA
INDIA
© 13
Are all doing
useful things?
© 14
Impacts of WWW
© 15
They are linked
© 16
Internet Bank Fraud
Rs11,022 Crore of Frauds
Discovered In Public Sector Banks
Between Apr-Dec 2014
© 17
© 18
Bank Fraud Rate
12000
10000
Farud (in crore)
8000
6000
4000
2000
0
2009 2010 2011 2012 2013 2014 2015
Year
© 19
© 20
Resons?
Is WWW itself
faulty?
Not designed
properly?
© 21
Web as a piece of cake
© 22
Don’t ask me
I don’tanything.
know
I can use only
It’s not my job
facebook.
© 23
A little knowledge ↓ no. of
fraudulent activities drastically.
Don’tbe only an ordinary WWW
user, know it.
© 24
Two options
© 25
eb
Technologies-
I
Uttam K. Roy
Dept. of Information Technology,
Jadavpur University, Kolkata
u_roy@[Link]
TOC
Web Technologies: Basics
Web Safety
© 27
Web
Technologies
: Basics
A brief history
© 29
WWW—A brief history
TimComputer
Berners-Lee was
Year 1990
working in CERN Lab. in
networks exist
Geneva, Switzerland.
that time
© 30
WWW—history contd.
Tim
Fileswanted
Developed
were a
tosystem
access
stored in
them
computers
© 31
What did he developed
Developed everything
Web server (CERN httpd)
Browser (WWW)
Protocol,
First website
Want to see?
© 32
First web site
© 33
First web site
© 34
© 35
Detail history
[Link]
© 36
WWW Today
Internet
© 38
WWW—What?
WorldWide Web—a repository of
information
Text, audio, video, Image etc.
Accessible from everywhere
Mistakenly called as Internet
© 39
WWW
Purpose
◦ To share information
How to share?
◦ A protocol is needed
◦ HyperText Transfer Protocol (HTTP)
© 40
HyperText
Transfer
Protocol
HTTP Overview
Purpose?
◦ Transfer resources
A client-server protocol
Components
◦ Web server—provides resources
◦ Web client—uses resources
How it works?
© 42
How HTTP works?
Network
Network
Send
Send me
me
[Link]
[Link]
Here
Here itit is
is
Web Client Web Server
© 43
Web Server
Processes requests via HTTP
Distributes info on the WWW
Current market share
Product Vendor Percent(April 2015)
Apache Apache 39.25%
IIS Microsoft 27.83%
nginx NGINX, Inc. 14.87%
GWS Google 2.36%
© 44
The Protocol
Two message
◦ Request message
◦ Response message
Messages
Messages
Request
Request Response
Response
© 45
Message format
© 46
The Protocol
Request
Request
Response
Response
© 47
Resource Addresses
URL
◦ An addressing scheme to identify
resources
Example
◦ [Link]
© 48
URL Format contd.
Method
◦ protocol used to retrieve the document
Host
◦ name/IP address of computer where the info
is located
Port
◦ optional port # of the server (default is 80)
Path
◦ path name of the file
© 49
HyperText
Markup
Language
What?
Used to write web pages
Layout
and hyperlink specification
language
Definesthe syntax and placement of
various media like text, images etc
Standardizedby World Wide Web
Consortium ( )
© 51
HTML Flavors
HTML – Hyper Text Markup
Language
SGML – Standard Generalized
Markup Language
XHTML - Extensible HTML
DHTML - Dynamic HTML
XML – Extensible Markup Language
© 52
Files
HTML is structured in hierarchical
order
Organized in hierarchical fashion
such as File management in
computer
DOM – Document Object Model
© 53
Components
Tags
◦ Commands to do something
<html>, <body>, <hr>, <br>
Attributes
◦ Modify tag’s appearance and behavior
<hr width="100" color="red">
© 54
Structure
Tree like structure <html>
<head>
html <title>
…
head body </title>
…
title </head>
<body>
…
</body>
</html>
© 55
Example
<html>
<head>
<title>First html</title>
</head>
<body>
Hello World!
<hr width="200" align="left">
</body>
</html>
© (/web/html/[Link]) 56
Result
© 57
Another Example
[Link]
<html>
<head>
<title>My First html page</title>
</head>
<body>
<form action="[Link]">
<table>
<tr><td>login</td>
<td><input type="text" size=10></td></tr>
<tr><td>password</td>
<td><input type="password" size=10></td></tr>
</table>
<input type="reset" value="Clear">
<input type="submit" value="Login">
</form>
</body>
</html>
© 58
Another Example
© 59
Released5th version
in October 2014
Deprecated and added
few tags
[Link]
© 60
Cascading
Style Sheet
CSS Motivation
Mixingdisplay instructions and style
information:
Adds complexity
Inefficient mechanism for handling display
characteristics of multi-page Web sites
Limits cross-platform compatibility of content
limits diversity of styles
Solution?
◦ Separating Style from Structure
© 62
Separation of style info
Content
Style
Web
page
© 63
Benefits
Same CSS may be applied to
different web pages
Style Web
Web
page page
Web Web
page page
© 65
Benefits
Different
CSS may be applied to a
web page
Body
Layout Text
Text
Physical layout
Heading
Headings
Body
Body
© 66
CSS for devices
Choose suitable CSS
BROWSER
Content CSS
CSS
CSS
MOBILE
Content
Tab
© 67
Example
<!--/web/css/[Link]-->
<!--/web/css/[Link]-->
<html>
<body>
<head>
<link
<p><p rel="stylesheet" type="text/css"
style='color:red;font-size:40pt;'>
color:red; font-size:40pt;
href="[Link]"
Hello World! />
</head>
</p>
</body>
<body>
</html>
<p>Hello World!</p> /*[Link]*/
</body> p {
</html>
}
© 68
Another example
<!--[Link]-->
<html>
<head>
<link rel="stylesheet" type="text/css"
href="[Link]" />
</style>
</head>
<body>
<p>abc</p>
</body>
</html>
p:first-letter {font-size: 500%; }
p:first-line {font-variant: small-
caps;font-weight: bold }
© 69
Result
© 70
Latest Standard
More features
Modules
Modern browsers support them
© 71
An HTML system
HTML
document Web Server
Internet
Web Client
Parser, formatter,
interface
© 73
Role of HTML
HTML
◦ Designed to display data
◦ Focuses on appearance
◦ Has a fixed set of predefined tags
◦ Ambiguity
© 74
Role of XML
Designed to structure, transport and
store data
Transformation and Dynamic data
customization
Interoperable
way to represent and
process documents
Self descriptive
© 75
Example
<note>
<to>John</to>
<from>Ani</from>
<heading>Reminder</heading>
<body>Return my book on Monday</body>
</note>
© 76
Another example
<song>
<title>Requiem</title>
<composer>Mozart</composer>
</song>
Equivalent HTML code:
<p>Requiem is a song composed by
Mozart</p>
© 77
Another Example
<question>
<text>What is the full form of XML?</text>
<A>eXtra Markup Language</A>
<B>eXtensible Markup Language</B>
<C>X-Markup Language</C>
<D>eXpandable Markup Language</D>
<answer value=“B”/>
</question>
© 78
Another Example
<schedule>
<appointment>
<subject>Lecture on web design</subject>
<when>
<date day=‘29’ month=‘08’ year=‘2013’/>
<startTime hour=‘2’ minute=‘30’/>
</when>
</appointment>
<appointment>
<subject>Setting queston paper</subject>
<when>
<date day=‘29’ month=‘08’ year=‘2013’/>
<startTime hour=‘10’ minute=‘30’/>
</when>
</appointment>
</schedule>
© 79
Another Example
<contact>
<person>
<name>B. S. Roy</name>
<number>9345654334</number>
</person>
<person>
<name>G. Mahapatra</name>
<number>9444554734</number>
</person>
</contact>
© 80
Role of XML
Not a replacement of HTML
◦ XML focuses on what data are
◦ HTML focuses on how data look
Tagsare custom defined (not
predefined)
◦ Functional meaning depends on
application
© 81
Displaying XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl"
href="[Link]"?>
<bookstore>
<book category="literature">
<title lang="beng">Sanchoita</title>
<author>Rabindranath Tagore</author>
<year>2009</year>
<price>200.00</price>
</book>
…
© 82
XSLT
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="[Link]
<xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>
<xsl:template match="/">
<html>
<body>
My Book Collection:
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th><th>Author</th><th>Year</th><th>Price</th>
</tr>
<xsl:for-each select="bookstore/book">
<tr>
<xsl:for-each select="./*">
<td><xsl:value-of select="."/></td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
© 83
Result
© 84
Validation
XML documents contains custom
tags
Howwill you ensure that XML
document contains expected tags?
Solution
◦ DTD/Schema and many more
© 85
© 86
XSLT
© 88
XSLT
<employee>
<name>K. Pal</name>
<sex>male</sex>
<status>single</status>
<salary basic='1500' DA='1000'/>
</employee>
Transformation
<employee profile='male single'>
<name>K. Pal</name>
<salary>
<basic>1500</basic>
<DA>1000</DA>
</salary>
</employee>
© 89
© 90
Web
Programming
Paradigm
Web Prog. Paradigm
Request
Network
Network
Response
Client-side Server-side
© 92
Programming Paradigm
Client-side
◦ JavaScript, VBScript, Applets
Server Side
◦ Servlet, JSP, JSF, ASP, PHP, CGI
© 93
Role
HTML
◦ Static tell the browser how a
document should appear
JavaScript Programming Language
◦ Makes web pages more dynamic and
interactive
◦ Change contents of document, animate
© 95
Example
The <script> Tag
◦ JavaScript programs are run from within an HTML
document
◦ <script> and </script>
Used to notify the browser that JavaScript statements
are contained within
© 96
Example contd.
Java Script Start Tag
<html>
<body>
<script language = "JavaScript">
[Link]("Hello
world!");
</script> Java Script End Tag
</body>
</html>
© 97
Another example
[Link]
[Link]
[Link]
DHTML/[Link]
DHTML/[Link]
© 98
Related Technologies
© 99
Server Side
Programming
Basic Idea
Find handler
[Link]
Execute
Network
Network
Here it is
HTML Response
Web Browser
Web Server Extension
© 101
Server-side technologies
Servlet
JSP
ASP
PHP
JavaScript
CGI
◦ Perl, C/C++, Python, shell script
© 102
Java Server
Pages
JSP
Embed Java code in html pages
directly
Uses delimiters <% and %>
Java
is an extremely versatile
language
The power of JSP is unquestionable
© 104
Temperature conversion
<table border="1" align="center">
<caption>Temperature Conversion chart</caption>
<tr><th>Celsius</th><th>Fahrenheit</th></tr>
<%
for(int c = 0; c <= 100; c+=20) {
double f = (c*9)/5.0 + 32;
[Link]("<tr><td>" + c + "</td><td>" + f +
"</td></tr>");
}
%>
</table>
© 105
Retrieving parameters
<%
String name =[Link]("name");
[Link]("Hello " + name);
%>
© 106
Adding two numbers
<%
int a = [Link]([Link]("a"));
int b = [Link]([Link]("b"));
[Link](a + " + " + b + " = " + (a + b));
%>
© 107
Examples
[Link]
[Link]
[Link]
© 108
Session Tracking
[Link]
[Link]
[Link]
[Link]
© 109
Java DataBase Connectivity
A Java API used to access database
Get result Query
Network
Network Network
Network
Here it is Response
Web Browser Web Server Database
DataBase access
© 110
Supporting Databases
© 111
Example
// D:\apache-tomcat-
6.0.18\webapps\wt\ajax
//[Link]
//[Link]
© 112
Problems of traditional web applications
A framework to develop better, faster and
more interactive web applications
Commonly uses XML as the format for
receiving data from server
© 114
Example
// D:\apache-tomcat-
6.0.18\webapps\wt\ajax
//[Link]
© 115
Popular scripting language
Syntax
similar to C which is why it is
so popular.
An example
© 116
<?php echo '<p>Hi! from php'; ?>
© 117
Perl
#!D:/Perl64/bin/[Link]
print "Content-type: text/html\n\n";
print "Hi! from perl!";
© 119
#!D:/Python27/[Link]
print "Content-Type: text/html\n"
print "Hi! from python"
© 120
Shell script
@echo off
echo Content-Type: text/plain
echo.
echo Hi! from batch file
© 121
#include <stdio.h>
int main() {
printf("Content-type: text/html\n\n");
printf("Hello world from c");
return 0;
}
© 122
An application
[Link]
© 123
Web Safety
© 125
© 126
Web Safety
How important?
It
is not possible to give up using
web and sit back
Must find a way out yourself
Conventional approaches have
failed to fully protect
© 127
Web Threats
Worms
Trojan Horse
Bots and Botnets
Hacking
Phishing
Spam
Spyware/Malware/Adware/Ransomware
Virus
© 128
Reasons?
Is not the web itself safe?
or
Users are responsible?
© 129
WWW: Weak Points
SMTP
CGI
Session Tracking
© 130
How do they spread?
Can't do anything without your help.
You download them
Click them to install/open
They take control
© 131
Anti-virus
Can an anti-virus really
protect your computer?
What is a virus?
An unwanted(?) program
© 132
An example
Write following in a batch file [Link]
(say)
del *.class
Is this file a virus?
© 133
How Anti-virus works?
Consults a virus definition file
If
file does not have info. about a
virus?
Anti-virus fails
Remedy
◦ Update definition file
© 134
Important questions
How frequently will you update?
If a virus gets installed between
two successive updates?
Is your anti-virus reliable?
Don’t they themselves produce
viruses to survive?
© 135
How to be
Web Safe?
Be Web Safe
© 137
Be Web Safe
Check before Install
Don’t rely on key generators
Don't OPEN unknown email
attachments
Use a firewall
© 138
Be Web Safe
Avoid sites that do not use https
© 139
Be Web Safe
Beware of AJAX
Backup important data
regularly
Get habituated to reinstall
OS yourself
© 140
THINK
True
Helpful
Inspiring
Necessary
Kind
© 141
Web
Be
Wide
Wise
