2014 database - course 1 - www introduction

WWW Introduction
Ensky / 林宏昱

What happened
when you open a browser?

DNS lookup
dns
what's the ip of facebook.com?
It's 173.252.110.27

HTTP protocol
GET /enskylin HTTP/1.1
Host: www.facebook.com
HTTP/1.1 200 OK
HTML

HTTP Protocol
• Protocol between Browser <-> Web server
• Initially used to transmit documents in HTML format
• We know GET method now, but how about post
something to webserver?

What happened
when you post a form on
website?

Perform a POST in HTTP
POST /register HTTP/1.1
HTTP/1.1 200 OK
HTML
save to
database
surname=E&name=ensky&email=…

HTTP usage
• Actually, HTTP is very simple, trivial, and easy to use
in many situations
• When it comes to data-manipulation, there are four
basic method:
Create, Read, Update, Delete(CRUD)
they can be perfectly mapped into HTTP protocol

HTTP protocol -> REST API
• Using HTTP protocol to serve an data-manipulation
API, we call it REST API.
• WIKI: REST
Operation HTTP
Read GET
Create POST
Update PUT
Delete DELETE

Imagine you're writing a game
• you'll have
– character info
• maybe life, age, attack power, skills, location, …
– Monster info
• maybe life, skills, …
– and many data need to be CRUD

REST API
• And it'll be very easy if you use REST API.
– GET /characters/1/life
– PUT /characters/1
life=60&isPoisoned=1
– PUT /characters/1/location
map=1&block=123

HyperText Markup Language
Insights

HTML is
a markup language
(not a programming language)

defines
defines what elements on the page
(images, links, texts, videos, forms, scripts, etc.)
http://goo.gl/qOu6OF

defines what orders the elements are
1
2
3
4
http://goo.gl/qOu6OF

HTML
• cooperates
–layouts with CSS
–functions with Javascript

CSS, HTML, JS
Structures Layouts Functions
結構樣式功能

HTML hello world
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello world! Title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

HTML is a nested language
<!doctype html>
<html lang="en">
<head>
<title>Hello world! Title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

HTML is a markup language
<!doctype html>
<html lang="en">
<head>
<title>…</title>
</head>
<body>
<p>…</p>
</body>
</html>
• Tag
• Attribute
• Value
• Node
• Parent
• Children

<!doctype html>
<html lang="en">
<head>
<title>…</title>
</head>
<body>
<p>…</p>
</body>
</html>
• Head defines
something for
browser
• Encoding
• Title of the
page
• Resources
• CSS
• Javascript

<!doctype html>
<html lang="en">
<head>
<title>…</title>
</head>
<body>
<p>…</p>
</body>
</html>
• Body defines
something to
render
(the contents)

Common attributes
<p id="unique" class="red-div" title="help text">HIHI</p>
• class
classify elements, usually set for CSS or JS to select some
elements. One element can have multiple classes
• id
same as class, but unique in a document.
One element can only have one id
• style
inline CSS
• title
help text when hover

Debug tools
• Chrome debug tool F12

HTTP protocol review
HTTP/1.1 200 OK
HTML

Imagine if you want to
write a web server…

1.Initialize a socket
wait for client's HTTP request
GET /icon.png HTTP/1.1
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
port 80

2.Parse the HTTP request
find out some useful information
like URL, Hostname, …
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML

3.Prepare file according to
above information
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML
get icon.png from
somewhere in your file system

4.Response the document
back to client
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML

Virtual host
• One web server can host many domains
• It can be determined by "Host: " part in HTTP
protocol
www.facebook.com

Virtual host
• In case of static file mapping, you can simply do
www.facebook.com -> c:Domainswww
image.facebook.com -> c:Domainsimage
so any request to http://www.facebook.com/song.mp3
web server will try to find the file at
c:Domainswwwsong.mp3

However, static files is not rocks
enough!

How about dynamic generated
documents?

The only difference is we get data
from database
rather than disk file
HTTP/1.1 200 OK
HTML

And we need to generate the HTML
HTTP/1.1 200 OK
HTML

And send it back to browser
Host: www.ensky.tw
HTTP/1.1 200 OK
HTML

If you want to write a web server
1. Initialize a socket to wait for client's HTTP
request
2. Parse the HTTP request and find out some
useful information like URL, Host, …
3. Prepare document according to above
information
4. Response the document back to client

there is different logic for each page
-> it is hard to write in Web server
HTTP/1.1 200 OK
HTML

If you want to write a web server
1. Initialize a socket to wait for client's
HTTP request
2. Parse the HTTP request and find out
some useful information like URL,
Host, …
3. Prepare document according to above
information
4. Response the document back to client
web
Server
CGI

CGI and Web server
Web server
CGI
HTTP Request
stdin + env
stdout
HTTP
Response
+ BODY
HTTP
request
body
HTTP
request
header
HTTP
response
head + body

CGI Implemention
#include <iostream>
using namespace std;
int main () {
cout << “<!doctype html>”;
cout << “<html>”;
cout << “ <head>”;
// …omitted
}

IDE
• We highly recommended to use

IDE Note
• You must save in UTF-8, otherwise you'll not be able
to render Chinese correctly
• see: ChineseWorld PTT

Save as UTF-8
• VIM
• Putty

HTML Tags - Text
p: paragraph
<p>Jlhuang Rocks!</p>

HTML Tags - Text
br: break
<p>Jlhuang <br> Rocks!</p>

HTML Tags - Link
a: anchor
<a href="http://www.google.com">Click me</a>

HTML Tags - Heading
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

HTML Tags - List
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<ol>
<li>Item4</li>
</ol>
</ul>

HTML Tags - Table
<table>
<thead>
<tr><td>Name</th><td>Score</td></tr>
</thead>
<tbody>
<tr><th>Ensky</th><td>100</td></tr>
<tr><th>dy93</th><td>80</td></tr>
</tbody>
<tfoot>
<tr><th>Average</th><td>90</td></tr>
</tfoot>
</table>
Name Score
Ensky 100
dy93 80
Average 90

HTML Tags - Images
img: image
<img
src="http://i1.ytimg.com/vi/iYQHkwCfCiw/m
axresdefault.jpg">

More Tags
http://www.w3schools.com/tags/

CSS reference
• https://speakerdeck.com/openwebscho
ol/04-css-openwebschool

Javascript reference
• https://speakerdeck.com/openwebschool/07-javascript-
openwebschool
• https://speakerdeck.com/openwebschool/08-js-frontend-
and-jquery-openwebschool

WWW reference
https://speakerdeck.com/openwebschool

2014 database - course 1 - www introduction

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a 2014 database - course 1 - www introduction

Similar a 2014 database - course 1 - www introduction (20)

Último

Último (20)

2014 database - course 1 - www introduction