Web Engineering

Muhammad Kamran
Lecture 1
 Administrative info
 Instructor

 Name: Muhammad Kamran

 E-mail: [email protected]
 E-mail: [email protected]
 Text Book and Websites
 W3scools.com

 PHP.net

 Wordpress.org

 https://www.upwork.com/

 https://www.freelancer.com/

 Tools

 XAMP
 Dreamweaver
 Visual Studio
 Course Outline
 Web Engineering, Web Technologies
 HTML
 CSS
 JavaScript
 jQuery
 AJAX
 PHP
 ASP.NET
 C#

1-4
 Grading policy

 First Sessional 10
 Second Sessional: 15
 Final: 55
 Assignment and Projects: 15
 Quiz: 10
 Attendance 5

1-5
 Table of Contents
 Web Engineering

 WWW and the HTTP protocol

 The HTTP protocol

 The request-response model
 GET vs. POST methods
 HTTP Response Codes
 Cookies

 Web Development Tools

6
 Web Engineering
 Web Engineering:
 Web engineering is basically all about
designing and promoting web based
systems.
 Basics
 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
 WWW and HTTP
HTTP Protocol: the Heart of the WWW
 What is WWW?
 WWW = World Wide Web = Web

 Global distributed information system in

Internet
 A service in Internet (like E-mail, DNS, ...)
 Consists of set of documents (and other
resources) located on different Internet servers
 Accessed through standard protocols like HTTP,
HTTPS and FTP by their URL
 Web servers provide Web content
 Web browsers display the Web content
10
 WWW Components
 Structural components
 Internet – provides data transfer channels over the
TCP and HTTP protocols
 Clients (Web browsers) – display Web content
 Web servers – IIS, Apache, Tomcat, GWS, etc.
 Semantic components
 Hyper Text Transfer Protocol (HTTP)
 Hyper Text Markup Language (HTML)
 Uniform Resource Locator (URL)
 Uniform Resource Identifiers (URIs)
11
 WWW Infrastructure
 Clients use Web browser application to request
resources from the Web servers via HTTP
 Resources have unique URL address
 Servers send the requested resource as a response
 Or reply with an error message
 Web pages are resources in WWW
 HTML text, graphics, animations and other files
 Web sites
 Web sites are sets of Web pages in WWW
12
 WWW Infrastructure (2)
 Client’s browser renders Web pages returned by
the Web servers
 Pages are in HTML (Hyper Text Markup Language)
 Browsers shows the text, graphics, sounds, etc.
 HTML pages contain hyperlinks to other pages
 The entire WWW system runs over standard
networking protocols
 TCP, DNS, HTTP, FTP, …
 The HTTP protocol is fundamental for WWW
13
 Main Components of WWW: URL
 Uniform Resource Locator (URL)
 Unique resource location in WWW, e.g.
http://www.telerik.com/academy/winter-2009-2010.aspx

 It is just a formatted string, consisting of:

 Protocol for communicating with the server (e.g.,
http, ftp, https, ...)
 Name of the server or IP address + optional port
(e.g. www.telerik.com, mail.bg:8080)
 Path and name of the resource (e.g. index.php)
 Parameters (optional, e.g. ?id=27&lang=en)
14
 URL Encoding
 URLs are encoded according RFC 1738:
“... Only alphanumeric [0-9a-zA-Z], the special
characters $-_.+!*'() and reserved characters used
for their reserved purposes may be used unencoded
within an URL.”

 All
other characters are escaped with the
formula:
%[character hex code in ISO-Latin character set]

 Example: space has decimal code 32, in hex –

20, so space in URL becomes %20
 Space can also be encoded as "+"
15
 URL – Examples
 Some valid URLs:

http://www.google.bg/search?sourceid=navclient&ie=
UTF-8&rlz=1T4GGLL_enBG369BG369&q=http+get+vs+post

http://bg.wikipedia.org:80/wiki/%D0%A2%D0%B5%D0%BB
%D0%B5%D1%80%D0%B8%D0%B3

 Some invalid URLs: Should be: ?q=C%23+.NET+4.0

http://www.google.bg/search?&q=C# .NET 4.0

Should be: ?q=%D0%B1%D0%B8%D1%80%D0%B0

http://www.google.bg/search?&q=бира
16
 Main Components of WWW: HTML
 Hyper Text Markup Language (HTML)

 Notation for describing formatted text with

images and hyperlinks
 Interpreted and displayed by the Web browsers
 A Web (HTML) page consists of:

 HTML file
 CSS stylesheet file (optional)
 A bunch of images (optional)
 Other resources (optional)
17
 Main Components of WWW: HTML
 HTML is straight-forward and easy to learn
 HTML documents are plain text files
 Easy to add formatting, hyperlinks, bullets, etc.
 Images can be added as separate files
 Can be automatically generated by authoring
programs
 Tools to help users creating HTML pages
 E.g. FrontPage, Dreamweaver, Visual Studio

18
 HTML – Example
<html>
<head><title>HTML Example</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div align="center"
style="background:skyblue">
This is a div</div>
</body>
</html>

19
 Main Components of WWW: HTTP
 Hyper Text Transfer Protocol (HTTP)
 Client-server protocol for transferring Web
resources (HTML files, images, styles, etc.)
 Important properties of HTTP

 Request-response model
 Text-based format
 Relies on a unique resource URLs
 Provides resource metadata (e.g. encoding)
 Stateless (cookies can overcome this)
20
The HTTP Protocol
How HTTP Works?
 HTTP: Request-Response Protocol
 Client program  Server program
 Running on end host  Running at the server
 E.g. Web browser  E.g. Web server
 Requests a resource  Provides resources

GET /index.html
HTTP/1.0

HTTP/1.0 200 OK
"Welcome to our
Web site!"

22
 Content-Type
 The Content-Type header at the server
specifies how the output should be processed
 Examples: UTF-8 encoded HTML page.
Will be shown in the browser.
Content-Type: text/html; charset=utf-8

Content-Type: application/pdf
Content-Disposition: attachment;
filename="Financial-Report-April-2010.pdf"

This will download a PDF file named

Financial-Report-April-2010.pdf
23
 HTTP Response Codes
 HTTP response code classes
 1xx: informational (e.g., “100 Continue”)
 2xx: success (e.g., “200 OK”)
 3xx: redirection (e.g., “304 Not Modified”, "302
Found")
 4xx: client error (e.g., “404 Not Found”)
 5xx: server error (e.g., “503 Service Unavailable”)
 "302 Found" is used for redirecting the Web
browser to another URL
24
 HTTP Cookies
 Cookie
 Cookies are small pieces of data stored by the
client on behalf of the server
 Included in all future HTTP requests to the server

Request

Response
Set-Cookie: XYZ

Next request
Cookie: XYZ

25
 Cookies – Example
 The client requests some URL:
GET / HTTP/1.1
Host: www.google.bg

 The server sets a cookie in the HTTP response:

HTTP/1.1 200 OK
Set-Cookie: PREF=ID=c0bf5fd5c3a25209; expires=Wed,
11-Jul-2012 16:13:22 GMT; domain=.google.bg

 In further requests to google.bg the Web

browser sends the cookie in the HTTP header:
GET / HTTP/1.1
Host: www.google.bg
Cookie: PREF=ID=c0bf5fd5c3a25209
26
View Cookies in the Web Browser

27
 HTTP Developer Tools
 Firebug plug-in for Firefox
 A must have for Web developers
 The ultimate tool for monitoring, editing and
debugging HTTP, HTML, CSS, JavaScript, etc.
 Free, open-source – www.getfirebug.com
 Fiddler – HTTP proxy

 Intercepts the HTTP traffic

 Analyzes the HTTP conversation
 Free tool – www.fiddler2.com
28
 HTTP Developer Tools (2)
 Wireshark packet analyzer
 Low-level packet sniffer
 Intercepts the entire IP network traffic
 Can reconstruct the HTTP conversation
 Can intercept any (unencrypted) protocol
 IP, ICMP, TCP, UDP, HTTP, DNS, SMTP, POP3
 Can intercept passwords sent in clear-text
 Free, open-source project – www.wireshark.org

29
 Web Technologies Basics

Questions?

http://academy.telerik.com
 HTML Basics

Questions?

http://academy.telerik.com