Scribd
Upload
17 views30 pages

CSCI4140 3 - Web-App

Uploaded by

andychchow326
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views30 pages

CSCI4140 3 - Web-App

Uploaded by

andychchow326
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Introduction to Web Applications

CSCI 4140: Open-Source Software


Project Development
Prof. Wei Meng

https://course.cse.cuhk.edu.hk/~csci4140/
Web Application Architecture
Web Server /
Web Browser Storage System
Application Server

HTTP

Internet LAN

Python

2
Hypertext Markup language

Hypertext Markup Language (HTML)


• Describes the structure of Web pages using markup

• Markup Language
指導的
- Include directives with content

- Directives can dictate presentation and describe


content, e.g., <title>Title text</title>

• Web pages are built from HTML elements

• HTML elements are represented by tags

- HTML uses <tag>…</tag> to denote tags

3
HTML Tags
• Web browsers use HTML tags to render a web page

• Tags can provide

- Formatting information, e.g., <i> for italic


parngmph
- Semantics about text, e.g., <title>, <p>

- Additional description about the content, e.g., <img>


Unoruredlist ( sit item

-
A 也

Structural information, e.g., <ul> and <li>

4
而
Example of HTML Document
了 textwntmt
<!DOCTYPE html> < ! DOCTYPEhtml >

<html> cntmi >


<head> chead >
<title>Page Title</title> Ctitle > Page Title cititle 7
</head> cluead >
<body> cbody

<h1>Introduction</h1> chl > Introduction clbl >

<p>Welcome to my page!</p> <


p > Welcome to mypage cIP >

</body> clbody >


</html> < lhtmi >

Introduction
Welcome to my page!

5
〉
Attributes of HTML Tags
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Introduction</h1>
<p id="p1" style="color: red">Welcome to my page!</p>
—

=
> "
p

"" style = " olor : red "


>
Welwme to
mypagelclp>
</body>
@

</html>

Introduction
Welcome to my page!

6
Cascading Style Sheet (CSS)
• Describes the style of an HTML document
Children
→
parnt → grand cnildreu
-

• Describes how HTML elements should be displayed eg ) font

• Driving problem behind CSS

- “What font and size does <p>Text</p> generate?”

- Answer: The browser has default values

- “How to use something different from the defaults?”


Dixel
的
- Answer: Define inline style, e.g., <p style=“font-size: 16px”>Text</p>

• Style sheets were added to

- Specify styles of HTML elements rather than browser default

- Avoid writing inline style for every HTML element


凹巴⑩⑩

?
8

塌州像世 7
Using CSS
Advantages

•①Separate style from content


- Cleaner HTML document
- Easier to make changes to both the content and style
•②Allow reuse of existing style on
- Multiple HTML elements
- Multiple HTML documents

8
Example of CSS
<!DOCTYPE html> body {
<html> background-color: lightblue;
<head> }
<title>Page Title</title>
</head> h1 {
<body> color: white;
text-align: center;
<h1>Introduction</h1> } Selector
<p>Welcome to my page!</p> seleetor
p {
</body>
</html>
Declaration
Block
{ font-family: verdana;
font-size: 24px;
} Property Value
Dedaratin
property ralue
Bot
HTML CSS

Introduction
Welcome to my page!

9
CSS Selectors: .class And #id
<!DOCTYPE html> body {
<html> background-color: lightblue;
<head> }
<title>Page Title</title>
</head> .white-center {
<body> color: white;
<h1 class=“white-center” text-align: center;
>Introduction</h1> }

<p id="p1">Welcome to my page!</ #p1 {


p> font-family: verdana;
<p class="white-center">This font-size: 24px;
paragraph is centered.</p> }

</body>
</html> HTML CSS

Introduction
Welcome to my page!
This paragraph is centered.

10
JavaScript
• The programming language of HTML and the Web

• We will discuss it in later lectures

11
Web Application Architecture
Web Server /
Web Browser Storage System
Application Server

HTTP

Internet LAN

12
Hypertext Transport Protocol (HTTP)
http://www.example.com/index.html
get
• The browser fetches the file index.html from the server
using the HTTP protocol

• HTTP - A simple request-response protocol on top of


TCP/IP

1. Establish a TCP/IP connection with


www.example.com 四
i的 put tm websi比
的
2. Send a HTTP GET request along the connection

3. Read the response from the server through the


connection 此
彈出來的東

13
西
HTTP Request
• Writes data into socket

• Embeds input data by


the user in the headers 吧
Method URL Version

GET /index.html HTTP/1.1


and the body Host: www.example.com
User-Agent: Mozilla/5.0
Headers Accept: text/html, */*
Accept-Language: en-us
Accept-Charset: ISO-8859-1,utf-8
Connection: keep-alive
\r\n
Body
(optional)

14
HTTP Response
• Reads data from socket

…
Version Status Status Message

HTTP/1.1 200 OK
Date: Sun, 7 Jul 2018 17:36:27 GMT
Server: Apache
Headers Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Content-Length: 1846
\r\n
<!DOCTYPE html>
<html>
Body
…
</html>
15
Common HTTP Response Status
Codes
Code Status Description

200 OK Success
301 Moved Permanently Permanent redirection

307 Temporary Redirect Try URI in the Location field this time

400 Bad Request Malformed request

401 Unauthorized Require user authentication ( password )

403 Forbidden Refuse to fulfill the request

404 Not Found

500 Internal Server Error Something unexpected (Error) happened

501 Not Implemented Does not support the requested functionality

503 Service Unavailable Unable to handle the request due to overloading or


maintenance

16
HTTP Methods
• GET - Reads data from a specified resource

• HEAD - Fetches only the information (HTTP header)


about data at a specified resource

• POST - Submits data to be processed to a specified


resource and get a response back

• PUT - Uploads data to a specified resource

• DELETE - Deletes the specified resource

GET and POST are commonly used

17
HTTP Is Stateless
• The HTTP server is not required to retain information or
status about each user for the duration of multiple
requests.

• A web application can track state over multiple


requests if it wants to.

- HTTP cookies

- Server side sessions

- Hidden variables within web forms

18
Web Application Architecture
Web Server /
Web Browser Storage System
Application Server

HTTP

Internet LAN

19
Web Servers
• Both Web Browsers and Web Servers speak HTTP

• Web Servers: get HTTP requests and send HTTP


responses

• A web server loops forever doing

- Accept TCP connection from a client (browser)


↓

- Read HTTP request from the connection


↓

- Process the request

- Write HTTP response to the connection


↓

- Close the TCP connection


20
山
Serving Static Documents
• Process “GET /index.html HTTP/1.1”
→

int fd = open(“index.html”);
{ int len = read(fd, buffer, sizeOfFile(fd));
write(tcpConnection, httpResponseHeader, headerSize);
} write(tcpConnection, buffer, len);
close(fd);

:
④

⑤
21
Generating Dynamic Content
• Common Gateway Interface (CGI)
協議
- A protocol for web servers to execute programs like
calling Command-line Interface (CLI) programs (in
another process) to generate web pages dynamically

• Process “GET /index.cgi HTTP/1.1”

runProgram(index.cgi, tcpConnection, env, …);

22
How CGI Programs Work?
比功課 input mvivonment variable

HTTP Request STDIN & ENV_VAR


課 請槍

HTTP Response Partial Response


交功課 ^n [
故好功深 (答案) “
( 老師) (學 ] 學霸 ( chegg )
Web Browser Web Server CGI Program

#!/usr/bin/perl

=head1 DESCRIPTION

env — a CGI program that just prints its environment

=cut
print "Content-type: text/plain\n\n";

for my $var ( sort keys %ENV ) {


printf "%s = \"%s\"\n", $var, $ENV{$var};
}

https://csci4140.cse.cuhk.edu.hk/cgi-bin/env.pl
23
、
生
金
Partial Response Generated by CGI
Program
Version Status Status Message

HTTP/1.1 200 OK
Date: Sun, 7 Jul 2018 17:36:27 GMT Server Output
Server: Apache
Content-Encoding: gzip
Headers
Content-type: text/plain
\r\n
CONTENT_LENGTH = "" CGI Program Output
CONTENT_TYPE = ""
Body DAEMON_OPTS = "-f" CGI Program should generate
DOCUMENT_ROOT = "/var/www/html" • The content-type
… • The body

Discussion
How can you return a zip file so that the browser knows that it is a zip file?
24
Baseonconenttype
VS Static

Dynamic Content
四

• With CGI programs, we can fulfill many tasks

- Form submission

- Search

- …

• How to generate customized output?

- Generate content based on user input

- Generate content based on application state

25
User Input - GET Request
<form method="GET" action="form.cgi">
Username: alex
<input type="text" name="user"></input><br> enUS
Language:
<input type="text" name="lang"></input><br>
<input type="submit"></input>
</form> ? eparmd fom URL
可
http://www.example.com/form.cgi?user=alex&lang=enUS Query String
在parate
Method URL Version kay vulmepaivs

GET /form.cgi?user=alex&lang=enUS HTTP/1.1


Host: www.example.com
User-Agent: Mozilla/5.0
Headers Accept: text/html, */*
Accept-Language: en-us
Accept-Charset: ISO-8859-1,utf-8
Connection: keep-alive
\r\n
Body
26
一
User Input - POST Request
<form method="POST" action="form.cgi">
Username: alex
<input type="text" name="user"></input><br> enUS
Language:
<input type="text" name="lang"></input><br>
<input type="submit"></input>
</form>
http://www.example.com/form.cgi
Method URL Version

以
POST /form.cgi HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Headers Accept: text/html, */*
Accept-Language: en-us
Content-Type: application/x-www-form-urlencoded
Content-length: 19
\r\n
Body user=alex&lang=enUS
27
GET Request vs. POST Request
GET POST

Visibility Data is visible to everyone in URL Data is not visible


UR (
History Parameters remain in browser history Parameters are not saved

Data Limited by URL length (maximum: Brdy


No restriction
length 2048 characters)
No restriction
Data type Only ASCII characters
Binary data is allowed
MIME
Encoding application/x-www-form-urlencoded
application/x-www-form-urlencoded
type multipart/form-data

Safer compared to GET as parameters


Data is visible in the URL
Security are not stored in browser history or
Never send sensitive data using GET!
web server log

28
Problems of CGI
• High performance overhead

- Invocation of a newly created process to call a


command (CGI program) per request

- The time and resource to create new process can be


much higher than the actual work of generating the
output

- The overhead can be even higher if the CGI program


needs to be interpreted

29
Reducing Overhead
• FastCGI

- Pre-fork multiple persistent processes to handle


requests

• Run application code within the web server process

- Extensions modules, e.g., mod_php

• Use precompiled CGI programs

- Write C/C++ programs

- Avoid using interpreted languages such as Perl or


PHP
30

You might also like